我有一个几乎可以工作的 JQuery 标签栏导航。
这些是我的问题: 1.加载页面时,没有文章可见。2.当我点击另一个标签栏项目而不是第一次时,第一篇文章没有隐藏。
这就是我现在所拥有的:http: //jsfiddle.net/ZPuNA/
jQuery脚本
$(function() {
$("nav a.non_active").click(function(event){
$("a.active").removeClass("active");
$(this).toggleClass("active");
var article = "article." + event.target.id;
$(article).css({"display": "block"});
return false;
});
});
html代码
<section>
<nav>
<ul>
<li><a href="#tab_1" class="non_active active" id="tab_1">Tab 1</a></li>
<li><a href="#tab_2" class="non_active" id="tab_2">Tab 2</a></li>
<li><a href="#tab_3" class="non_active" id="tab_3">Tab 3</a></li>
</ul>
</nav>
<article class="tab_1">This is tab 1.</article>
<article class="tab_2">More content in tab 2.</article>
<article class="tab_3">Tab 3 is always last!</article>
</section>