JavaScript 显示/隐藏选项卡 [英] JavaScript show/hide tab

问题描述

我想要的是先隐藏所有内容，然后单击一个选项卡，显示相应的内容(选项卡变为活动")，再次单击它将消失.一些标签只是一个mailto"链接.

What i want is hide all content first, then click one tab, the corresponding content shows (the tab becomes '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();
        }

    }
);
});

导航代码如下:

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

推荐答案

这应该可行:

$(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.

工作:http://jsfiddle.net/tqhHA/

这篇关于JavaScript 显示/隐藏选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！