CODEWITHSUNDEEP
javascriptjquery
JVK
JVK

Reputation: 95

Jquery getting the tab to add a class when active

All of this works except for trying to get it to apply the class 'current_tab' to the 'ul.tab_nav li' when the 'ul.tab_nav li a' is clicked.

JQuery

$(document).ready(function(){
$('.tabs').each(function(){
    var tab = $(this);
    tab.find('.tab_content').hide(); // Hide all divs

    tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
        tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
        tab.addClass('current_tab'); //Set clicked link class to active

        var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link

        tab.find('.tab_content').slideUp(); // Hide all divs
        $(currentTab).slideDown(); // Show div with id equal to variable currentTab
        return false;
    });
});
});

and html

   <div class="box tabs siteBackgroundColor">
    <div class="box_header">
        <ul class="tab_nav">
            <li class="dummyTab"><a href=".tab1" class="iconTab">&nbsp;</a></li>
            <li><a href=".tab2" class="iconTab iconTabWifi">&nbsp;</a></li>
            <li><a href=".tab3" class="iconTab iconTabWeb">&nbsp;</a></li>
            <li><a href=".tab2" class="iconTab iconTabHours">&nbsp;</a></li>
            <li><a href=".tab4" class="iconTab iconTabMap">&nbsp;</a></li>
            <li><a href=".tab3" class="iconTab iconTabPhone">&nbsp;</a></li>
            <li><a href=".tab4" class="iconTab iconTabShare">&nbsp;</a></li>
        </ul>
    </div>
    <div class="box_content tab_content tab1 dummyTab"></div>
    <div class="box_content tab_content tab2">
        <p><span class="textBold">HRS:</span> Mon-Fri 7am to 3pm, Saturday 8am to 3pm <span class="textBold">KITCHEN CLOSES</span> at 2:30pm</p>
    </div>
    <div class="box_content tab_content tab3">3<br />
        3<br />
        3<br />
        3</div>
    <div class="box_content tab_content tab4">4<br />
        4<br />
        4<br />
        4<br />
        4</div>
</div>

Besides that it's working the way I need it to.

Upvotes: 0

Views: 3625

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

tab.find('ul.tab_nav li').removeClass('current_tab');
$(this).closest('li').addClass('current_tab'); //Set clicked link li to active

Demo 1

To Set the active link only then try,

tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active

Demo 2

In Place of 

 tab.addClass('current_tab'); //Set clicked link class to active

Updated you should use hide() in place of slideup() which will not animate the closing div and check the active tab if it is your current_tab then use return false for that anchor click

Demo 3

Upvotes: 2

Nibin
Nibin

Reputation: 3960

Try replacing the following code 

tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active

with

tab.find('ul.tab_nav li').removeClass('current_tab'); // Remove active class from all links
$(this).parent().addClass('current_tab'); //Set clicked link class to active

Fiddle http://jsfiddle.net/HMS37/

Upvotes: 1

user2889008
user2889008

Reputation:

I edit in your code for you can learn easily: 

$(document).ready(function(){
    $('.tabs').each(function(){
        var tab = $(this);
        tab.find('.tab_content').hide(); // Hide all divs

    tab.find('.tab_nav li a').click(function(){ //When any link is clicked
        tab.find('.tab_nav li').removeClass('current_tab'); // Remove active class from all links
        tab.addClass('current_tab'); //Set clicked link class to active

        var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link

        tab.find('.tab_content').slideUp(); // Hide all divs
        $(".currentTab").slideDown(); // Show div with id equal to variable currentTab
        return false;
    });
});
});

Upvotes: 0

Related Questions