jquery - Jquery 标签栏导航

Question

我有一个几乎可以工作的 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>

Answer 1

这是一个工作代码：http: //jsfiddle.net/ZPuNA/3/

jQuery(document).ready(function($) {
    $("article").hide();
    var currentDiv = $(".active").attr("ID");
    $("article."+currentDiv).show();
    $("nav a.non_active").click(function(event){
        $("a.non_active").removeClass("active");
        $(this).toggleClass("active");

        var article = "article." + event.target.id;
        $("article").hide();
        $(article).show();

    return false;
    });
});

我把它放在一个文档就绪事件中。并从隐藏所有文章开始。单击然后只需切换活动类并显示具有正确类的文章。