Question

我想要的是首先隐藏所有内容，然后单击一个选项卡，相应的内容显示（选项卡变为“活动”），再次单击它将消失。一些标签只是一个'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>

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

Answer 2

将点击功能更改为：

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

Answer 3

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

JavaScript显示/隐藏选项卡

3 个答案: