Менять вкладки с помощью JavaScript, но, для работы на iPad

Question

Я пытаюсь сделать вкладки exachange, но я думаю, что это не работает на iPad ...

Вот мой код на jquery.

$(document).ready(function(){
            var tabAtual = 1;
            $("a").click(function(e){
                var nr = e.target.id;
                $("#tab"+tabAtual).toggle();
                $("#tab"+nr).toggle();
                tabAtual = nr;
            });
        });

А HTML здесь:

<div id="box">
        <p>
            <a href="#" id="1"><img src="img/click01.png"/></a>
            <a href="#" id="2"><img src="img/click02.png"/></a>
            <a href="#" id="3"><img src="img/click03.png"/></a>
            <a href="#" id="4"><img src="img/click04.png"/></a>
        </p>
        <div id="tab1">
            <img src="img/pag01.png" width="643" height="308">
        </div>
        <div id="tab2" class="hide">
            <img src="img/pag02.png" width="643" height="308">
        </div>
        <div id="tab3" class="hide">
            <img src="img/pag03.png" width="643" height="308">
        </div>
        <div id="tab4" class="hide">
            <img src="img/pag04.png" width="643" height="308">
        </div>
    </div>

Идея состоит в том, чтобы, когда я нажимаю другую кнопку png, она заменяет кнопку без щелчка другим png, а кнопку, которую нажимают, - другим png ....

Но есть моя проблема, я не могу заставить его работать должным образом на iPad.

Кто-нибудь знает, как мне помочь?

Спасибо!

Answer 1

Вы можете найти это потому, что «щелчок» не обязательно равен «нажатию» на iPad.В большинстве случаев касание будет активировать только состояние при наведении, а не функцию щелчка, прикрепленную к элементу.Вот фрагмент кода, который я использовал в предыдущих проектах, который может помочь.

// Fix hover state / click for iPad
var ua = navigator.userAgent,
touch_event = (ua.match(/iPad/i)) ? "touchstart" : "click";