0

タブ付きメニューとそのコンテンツの私のhtml：

<div class="tab-menu"> <!-- menu -->
    <ul>
        <li><a href="#tab1">link to tab 1</a></li>
        <li><a href="#tab2">link to tab 2</a></li>
        <li><a href="#tab3">link to tab 3</a></li>
    </ul>
</div>
<div class="tab-wrapper"> <!-- content -->
<!-- BEGIN FIRST TAB -->
    <div id="tab1" class="tab">first tab content</div>
    <div id="tab2" class="tab">second tab content</div>
    <div id="tab3" class="tab">third tab content</div>
</div>

...そして、メニューを機能させるスクリプトは

    // Displays the first tab when 
$(".tabs").each(function(){
    $(this).find(".tab").hide();
    $(this).find(".tab-menu li:first a").addClass("active").show();
    $(this).find(".tab:first").show();
});

$(".tabs").each(function(){

    $(this).find(".tab-menu a").click(function() {

        $(this).parent().parent().find("a").removeClass("active");
        $(this).addClass("active");
        $(this).parent().parent().parent().parent().find(".tab").hide();
        var activeTab = $(this).attr("href");
        $(activeTab).fadeIn();
        return false;

    });

});

ユーザーがタブをクリックすると、メニューが機能します。<div>これは、デフォルトで最初に表示されるメニューが開き、ユーザーが別のタブをクリックすると、対応するタブ<div>が期待どおりに表示されることを意味します。ただし、 url を入力すると、mysite/path#tab2まだ tab1 が開いた状態で開きます。tab2で開くにはどうすればいいですか? 具体的には、URL にアクセスしてラベルを抽出するにはどうすればよいですか? これをjavascriptでやりたい

編集:document.location.href完全な URL を提供しているようです。この URL からラベルを解析して抽出するにはどうすればよいですか?

4

1 に答える 1

1

ページがロードされたら、location.hashプロパティを確認して、次のように動作します。

$(function() {
    $(".tab").hide();
    $(".tab-menu a").removeClass("active");

    $(location.hash).show();
    $(".tab-menu a[href='" + location.hash + "']").addClass("active");
});

それよりも良いのは、clickリスナーをまったく登録せず、hashchangeイベントを使用することだけです。

$(window).hashchange(function() {
    $(".tab").hide();
    $(".tab-menu a").removeClass("active");

    $(location.hash).show();
    $(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
于 2013-02-17T19:22:27.787 に答える