CODEWITHSUNDEEP
javascriptjqueryhtml
SuperXero
SuperXero

Reputation: 43

Changing Javascript tabs with a button?

I'm working on a website that's implementing tabs via javascript, and I'd like to create a button that goes to the 'next' tab. I don't care if I have to hardcode in the tab IDs into the javascript or what, but regardless I'd like to be able to advance the tabs.

EDIT3: Here's a jfiddle implementation of what I have. I just want the next button to be able to advance the tabs similar to clicking on them. Thanks!

http://jsfiddle.net/Cd5qb/

Here's the code I have for the current working tabs, without a button:

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

tabs.click(function() {
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');
    if(!$this.hasClass('active')){
        $this.addClass('active').siblings().removeClass('active');
        tabContents.hide().filter(activeTab).fadeIn();
    }
    return false;
});

So I'm trying to implement something similar to the tabs.click for a button, and here's what I've got so far:

var tabbtn = $(".tabbutton");
tabbtn.click(function() {
    var listItem = document.getElementById('tab2');
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');
    tabContents.hide().filter("#tab2").fadeIn();

    return false;
});

This will actually display the right tab's information, but it won't change which tab header is highlighted.

Anyone have any ideas? Thanks in advance for the help!

Upvotes: 0

Views: 500

Answers (2)

Raunak
Raunak

Reputation: 17

@ Gustavo Hoirisch: With your previous code I too did removed 'active' from 'tabContents' and was about to post. Anywayz grt job.

Upvotes: 0

Gustavo Hoirisch
Gustavo Hoirisch

Reputation: 1657

How about:

$(".tabbutton").click(function(){
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
    if(nextTab === 4){ nextTab = 1; }
    $("#"+nextTab).click();
});

and adding a numerical equivalent id to the li items?

Working fiddle is here: http://jsfiddle.net/gugahoi/Cd5qb/1/

UPDATE:

Ok, here is the new fiddle with only the button changing the tabs.

This is all the js:

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

$(".tabbutton").click(function(){
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
    if(nextTab === 4){ nextTab = 1; }
    tabs.removeClass("active");
    $("#"+nextTab).addClass("active");
    tabContents.hide();
    $("#tab"+nextTab).fadeIn("slow");
});

And this is the only update needed in the html:

<ul class="tabs clearfix">
    <li id="1"><a href="#">Tab1</a></li>
    <li id="2"><a href="#">Tab2</a></li>
    <li id="3"><a href="#">Tab3</a></li>
</ul>

Upvotes: 1

Related Questions