javascript - 智能化我的 jquery 选项卡式浏览

Question

我整理了一个非常简单的选项卡式浏览器，您可以在这里看到 http://jsfiddle.net/zandergrin/sN2Eu/

我只是想知道是否有一种方法可以让脚本变得更聪明，以便自动处理所有编号 - 即我可以添加一个新选项卡，而不需要添加新的 javascript。

我知道我可以用 jquery ui 做到这一点，但是 a) 我正在努力保持它的超轻量级，更重要的是，b) 我正在努力学习!!

谢谢 - 我的 javascript 非常基础，所以非常感谢任何解释

Answer 1

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

<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>

现在你的 javascript 可以了

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

演示在 http://jsfiddle.net/gaby/sN2Eu/3/