1

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

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

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

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

4

1 回答 1

2

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

于 2012-05-01T17:09:04.530 回答