Question

我已经整理了一个非常简单的标签式浏览器，你可以在这里看到 http://jsfiddle.net/zandergrin/sN2Eu/

我只是想知道是否有办法让脚本变得聪明，以便自动处理所有编号 - 即我可以添加新标签，而不需要添加新的javascript。

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

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

Answer 1

您需要为每个选项卡添加一个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>

，您的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/

演示

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

1 个答案: