JavaScript显示/隐藏选项卡

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

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

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

来源

2011-11-30 Rex

您有什么问题？哪部分不工作？ – mithunsatheesh

哦，对不起！当再次点击时不会隐藏标签。我已经更新了这个问题。 – Rex

当点击邮件链接时，你想要发生什么？ –

这应该工作：

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

来源

2011-11-30 11:14:07 Roman

更改点击功能：

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

来源

2011-11-30 11:12:17

对不起，我试过这个，但不是很工作，因为第二次点击不会隐藏标签。但它很可能是我实现它错了，谢谢！ – Rex

@Rex在我添加到我的答案 –

的示例中工作，我在示例中发现，当显示'about'的内容时，再次单击'about'将不会隐藏内容。 – Rex

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

来源

2011-11-30 11:34:18

JavaScript显示/隐藏选项卡

回答

相关问题