CODEWITHSUNDEEP
jqueryipadtabs
efdutra
efdutra

Reputation: 59

Change tabs with javascript, but, to work on iPad

I'm trying to make an tabs exachange but i think it dont work on iPad...

There's my code, on jquery.

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

And the HTML is here:

<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>

The idea is to when i click another png button, it changes the unclicked button with another png, and the clicked button with another png too....

But, there is my problem, i can't get it working properly on iPad.

Someone have any idea how to help me ?

Thanks!

Upvotes: 0

Views: 347

Answers (1)

Steve O
Steve O

Reputation: 5774

You may find it's because a "click" doesn't necessarily equal a "tap" on an iPad. A lot of the time the tap will only activate a hover state, not the click function you've attached to the element. Here's a snippet of code that I've used in previous projects that may help.

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

Upvotes: 2

Related Questions