JavaScript 显示/隐藏选项卡答案

【问题标题】：JavaScript show/hide tabJavaScript 显示/隐藏选项卡
【发布时间】：2011-11-30 11:04:46
【问题描述】：

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

问题是再次点击时无法隐藏标签

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

【问题讨论】：

您遇到了什么问题？哪个部分不工作？
哦，对不起！再次单击时不会隐藏选项卡。我已经更新了问题。
当一个 emailto 链接被点击时你想发生什么？
@richard 只是启动电子邮件客户端，没有显示内容

标签： javascript jquery tabs show-hide

【解决方案1】：

这应该可行：

$(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();
        }
    });
});

你必须检查当前标签是否可见在你隐藏它。

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

【讨论】：

【解决方案2】：

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

请试试上面的代码.. 我将href值更改为“#”，然后在jquery中进行了一些更改。如果您有任何疑问，请在评论中提问.. click here to test

【讨论】：

【解决方案3】：

将点击函数改为：

$('#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

【讨论】：

对不起，我试过了，但效果不佳，因为第二次点击不会隐藏标签。但很有可能是我执行错了，谢谢！！！
我在示例中发现，当显示'about'的内容时，再次点击'about'不会隐藏内容。