CODEWITHSUNDEEP
javascriptjqueryhtmltabs
infinity
infinity

Reputation: 719

Active tab click issue

I setup a fiddle here: http://jsfiddle.net/bnnsqwsd/.

Basically, I'm trying to recreate http://jsfiddle.net/syahrasi/Us8uc/, but with a couple changes (changing from ids to data-attributes mostly, so I can have multiple tab modules on a page).

It works, but if you click the first active tab (Tab #1) after the load, it breaks?

Here's my jQuery:

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).data("tab");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});

Upvotes: 0

Views: 90

Answers (3)

Accore LTD
Accore LTD

Reputation: 287

i also use this tab. it nice and small script. i want to how can make auto change one by one. say like each 5 sec next tab will active. something like slider

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

You need to change the first tabs link to

<a href="#" data-tab=".tab-1">Tab 1</a>

demo at http://jsfiddle.net/bnnsqwsd/2/

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you forget to Add

data-tab=".tab-1"

to your first li a

    <li class="current"><a href="#tab-1" data-tab=".tab-1">Tab 1</a></li>

DEMO

Upvotes: 3

Related Questions