Javascript 优化我的jquery选项卡式浏览

我组装了一个非常简单的选项卡式浏览器，您可以在这里看到

我只是想知道是否有一种方法可以使脚本更智能化，从而自动处理所有的编号-即我可以添加一个新的选项卡，而不需要添加新的javascript

我知道我可以用jQueryUI来实现它，但a我正在努力让它超轻，更重要的是，b我正在努力学习

---

谢谢-我对我的javascript非常了解，因此任何解释都将不胜感激

您需要为每个选项卡添加一个comman类，以便您可以选择所有选项卡和唯一的id，该id也是链接href中的值。 还向所有链接添加一个公共类

<div class="tab-nav">
     <ul>
         <li><a href="#tab1" class="tabclick active">Overview</a></li>
         <li><a href="#tab2" class="tabclick">Specs</a></li>
         <li><a href="#tab3" class="tabclick">More Info</a></li>
     </ul>
</div>


<div id="tab1" class="tab">
    <p>content1</p>
</div>

<div id="tab2" class="tab" style="display: none">
    <p>content2</p>
</div>

<div id="tab3" class="tab" style="display: none">
    <p>content3</p>
</div>

---

演示在

这看起来很完美-我稍后会尝试，但我感觉到有滴答声。谢谢在闪亮的绿色勾号出现之前只有一个问题-这似乎停止了使用哈希位置更新url，因此当我单击tab2时，url保持不变-不会变成myurl.com/mypage.htmltab2，这会阻止窗口位置位working@JorgeLuisBorges，仅第一次需要location.hash部分。所有后续的单击都是从被单击的实际元素处理的。。在任何情况下，您都可以注释掉e.preventDefault；行，以便在每次单击时更新url中的哈希。hmm-哈希的目的是使人们可以使用哈希直接链接到url，并切换到正确的选项卡。取消注释该行似乎无法启用this@JorgeLuisBorges，陈旧的语言用法。。我的意思是评论它，而不是取消注释。。

function tabActions(e) {
    // e.preventDefault(); // stop default browser action of link will not add the hash to the url

    var targetId = $(this).attr('href'); // extract the value in the href (the #tab1 for example)

    $('.tabclick').removeClass('active'); // remove the active class from all links (find them by their common class)
    $(this).addClass('active'); // add it to the currently clicked link

    $('.tab').hide(); // find all tabs (by the common class) and hide them
    $(targetId).show(); // show the current tab 
};

$('.tabclick')
    .click(tabActions) // bind handler
    .filter(function(){ // find the link that points to the hash in the url
        return this.hash == window.location.hash;
    })
    .click(); // manually trigger click on it