JavaScript 显示/隐藏选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8324887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript show/hide tab
提问by Rex
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.
我想要的是先隐藏所有内容，然后单击一个选项卡，显示相应的内容（该选项卡变为“活动”），再次单击它会消失。一些标签只是一个“mailto”链接。
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>
采纳答案by Roman
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 beforeyou hide it.
在隐藏之前，您必须检查当前选项卡是否可见。
working: http://jsfiddle.net/tqhHA/
回答by dku.rajkumar
$(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 comment if you have any doubt.. click here to test
请尝试上面的代码。我将 href 值更改为“#”，然后在 jquery 中进行了一些更改。如果您有任何疑问，请在评论中提问..单击此处进行测试
回答by Richard Dalton
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();
}
});
