2

私はjqueryにかなり慣れていないので、jquery tabberを構築することにしました。ここまでは順調ですが、少し問題があります!!! URL に基づいてタブバーをアクティブにする方法がわかりません。たとえば、リンクが のwww.myweb.com#tab2場合、2 番目のタブバーがアクティブになります。私のjqueryは次のとおりです。jqueryには独自のtabberスクリプトがあることがわかりましたが、使用したくありません。だから、他の誰かが私がこれを達成するのを手伝ってください

Javascript

$(document).ready(function() {

    var hash = location.hash;
    var link1 = ("ul#tabs li a[href='" + hash + "']")
    var link2 = ("ul.tabs li a[href='" + hash + "']")
    var link3 = ("ul#tabs li[href='" + hash + "']")

    $(".tab_content").hide(); //Hide all content
    if ((link3.length)(link2.length)(link1.length))

            { //check if such link exists
                      $(link3, link2, link1).parent().addClass("active"); //Activate tab
                      $(hash).show();
    }

    else {
      $("ul.tabs li a:first, ul#tabs li:first, ul#tabs li a:first").addClass('active');
      $(".tab_content:first").show()

        // On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });

});

HTML 

<ul class="tabs">
    <li><a href="#tab1">Design Team</a></li>
    <li><a href="#tab2">Publications</a></li>
    <li><a href="#tab3">Awards &amp; Recognitions</a></li>
    <li><a href="#tab4">Our Mission</a></li>
    <li class="last-item"><a href="#tab1">Company Profile</a></li>
</ul>

これが私がどこまで来たかです。私は3つのセレクターを持っているので、jqueryコードが奇妙に機能していません.これを達成するにはどうすればいいですか? ありがとう

4

2 に答える 2

0

JQueryUI を見てください。このようなコンポーネントがあらかじめ組み込まれています。具体的には: http://jqueryui.com/tabs/

編集：

それとも、あなたが独自のものを構築している特定の理由ですか?

于 2013-03-29T14:42:52.883 に答える
0

以下を使用して、選択したタブを設定できます。

$(document).ready(function() {

    $('#tabs').tabs(); // make jquery tabs

    $("#tabs").tabs("select", window.location.hash);
});

関数の 2 番目のパラメーターは$.tabs、インデックスまたはセレクターのいずれかを受け入れます。

于 2013-03-29T15:11:57.143 に答える