jquery - JavaScript showhide tab - Stack Overflow

admin管理员组

文章数量:1279176

What i want is hide all content first, then click one tab, the corresponding content shows (the tab bees 'active'), where click it again it will disappear. some of the tabs are just a 'mailto' link.

problem is i can't hide the tabs when click again

    $(document).ready(function(){
    $('#nav div').hide();
    $('#nav div:first').show();
    $('#nav ul li:first').addClass('active');
    $('#nav ul li a').click(function(){ 
        $('#nav div').hide();
        $('#nav ul li').removeClass('active');
        $(this).parent().addClass('active'); 
        var currentTab = $(this).attr('href'); 
        if($(currentTab).css('display')=='none'){
            $(currentTab).show();
        }else{
            $(currentTab).hide();
        }

    }
);
});

the navigation code is the following:

<div id="nav">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="mailto:email">Email</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div id="about">
      about
    </div>
    <div id="contact">
      contact
    </div>
</div>

What i want is hide all content first, then click one tab, the corresponding content shows (the tab bees 'active'), where click it again it will disappear. some of the tabs are just a 'mailto' link.

problem is i can't hide the tabs when click again

    $(document).ready(function(){
    $('#nav div').hide();
    $('#nav div:first').show();
    $('#nav ul li:first').addClass('active');
    $('#nav ul li a').click(function(){ 
        $('#nav div').hide();
        $('#nav ul li').removeClass('active');
        $(this).parent().addClass('active'); 
        var currentTab = $(this).attr('href'); 
        if($(currentTab).css('display')=='none'){
            $(currentTab).show();
        }else{
            $(currentTab).hide();
        }

    }
);
});

the navigation code is the following:

<div id="nav">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="mailto:email">Email</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div id="about">
      about
    </div>
    <div id="contact">
      contact
    </div>
</div>

• javascript
• jquery
• tabs
• show-hide

Share Improve this question Follow edited Dec 1, 2011 at 9:57 一二三 21.3k1111 gold badges6969 silver badges7575 bronze badges asked Nov 30, 2011 at 11:04 RexRex 12511 gold badge44 silver badges99 bronze badges 4

• what is the problem you are having? which part is not working? – Mithun Satheesh Commented Nov 30, 2011 at 11:09
• oh im sorry! not being to hide the tabs when click again. i've updated the question. – Rex Commented Nov 30, 2011 at 11:11
• What do you want to happen when an emailto link is clicked? – Richard Dalton Commented Nov 30, 2011 at 11:12
• @richard just initiate the email client, no content shown – Rex Commented Nov 30, 2011 at 11:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This should work:

$(function() {
    $('#nav div').hide();
    $('#nav div:first').show();
    $('#nav ul li:first').addClass('active');
    $('#nav ul li a').click(function(){
        var currentTab = $(this).attr('href');
        var vis = $(currentTab).is(':visible');
        $('#nav div').hide();
        $('#nav ul li').removeClass('active');
        $(this).parent().addClass('active');
        if(vis) {
            $(currentTab).hide();
        } else {
            $(currentTab).show();
        }
    });
});

you have to check if the current tab is visible before you hide it.

working: http://jsfiddle/tqhHA/

   $(document).ready(function(){
$('#nav div').hide();
$('#nav div:first').show();
$('a').click(function(){    
    var currentTab = '#'+$(this).text().toLowerCase();
    if($(currentTab).is(':visible')){
        $('#nav div').hide();
        $(currentTab).hide();
    }else{
        $('#nav div').hide();
        $(currentTab).show();
    }
}
);
});


<div id="nav">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Email</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div id="about">
      about
    </div>
    <div id="contact">
      contact
    </div>
</div>

Please try above code.. I change href value to just "#" then some change in jquery. Please ask in ment if you have any doubt.. click here to test

Change the click function to:

$('#nav ul li a').click(function(){ 
    var currentTab = $(this).attr('href');  
    $('#nav div').not(currentTab).hide();
    $('#nav ul li').removeClass('active');
    $(this).parent().toggleClass('active');     
    if (currentTab.indexOf("mailto:") === -1)
    {
        $(currentTab).toggle();
    }
});

Working example

本文标签： jqueryJavaScript showhide tabStack Overflow