1

ここで見ることができる非常に単純なタブ付きブラウザをまとめました http://jsfiddle.net/zandergrin/sN2Eu/

すべての番号付けが自動的に処理されるようにスクリプトをスマートにする方法があるかどうか疑問に思っています。つまり、新しいタブを追加でき、新しい JavaScript を追加する必要はありません。

jquery ui でできることはわかっていますが、a) 超軽量を維持しようとしており、さらに重要なことに、b) 学習しようとしています!!

ありがとう - 私は自分の JavaScript でかなり基本的なので、どんな説明でも大歓迎です

4

1 に答える 1

2

すべてのタブと、リンクの値でもある一意の 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 に答える