JavaScript显示/隐藏选项卡
我想要的是首先隐藏所有内容，然后单击一个选项卡，相应的内容显示（选项卡变为“活动”），再次单击它将消失。 一些标签只是一个’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(); } } ); }); 导航代码如下：
这应该工作：
$(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/
$(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(); } } ); });
请尝试上面的代码..我将href值更改为“＃”，然后在jquery中进行一些更改。 如果您有任何疑问，请在评论中询问.. 点击此处进行测试
将点击function更改为：
$('#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(); } });
工作实例