0

次のJavaScriptを使用するHTMLのタブシステムがあります。

(function() {

        var $tabsNav    = $('.tabs-nav'),
            $tabsNavLis = $tabsNav.children('li'),
            $tabContent = $('.tab-content');

        $tabContent.hide();
        $tabsNavLis.first().addClass('active').show();
        $tabContent.first().show();

        $tabsNavLis.on('click', function(e) {
            var $this = $(this);

            $tabsNavLis.removeClass('active');
            $this.addClass('active');
            $tabContent.hide();

            $( $this.find('a').attr('href') ).fadeIn();

            e.preventDefault();
        });

    })();

HTMLマークアップは次のとおりです。

<ul class="tabs-nav">

    <li class="active">
        <a href="#1">TAB 1</a>
    </li>
    <li>
        <a href="#2">TAB 2</a>
    </li>
    <li>
        <a href="#3">TAB 3</a>
    </li>

</ul><!-- end .tabs-nav -->

<div class="tabs-container">
    <div class="tab-content" id="1">

        CONTENT OF TAB 1

    </div><!-- end #tab1 -->

    <div class="tab-content" id="2">

        CONTENT OF TAB 2

    </div><!-- end #tab2 -->

    <div class="tab-content" id="3">

        CONTENT OF TAB 3

    </div><!-- end #tab3 -->

ULはタブの名前であり、タブをクリックすると、そのタブのコンテンツに移動します。ご覧のとおり、タブをクリックするとリンクはwww.thepage.com＃tab1などになりますが、アドレスバーには何も表示されません。thepage.com＃tab2にアクセスしてタブ2を表示できるようにしたいのですが、これは機能しません。

このページに投稿されたjavascriptのwindow.locationやhtml5のpushstateなどのさまざまなメソッドを検索しましたが、それらを機能させる方法がわかりませんでした。SEOの目的では、ハッシュタグではなく、page.com/tab1を使用するのが最適です。私はあなたが次のようにhtml5のpushstateでこれを達成できることを知っています：

window.history.pushState(“object or string”, “Title”, “/new-url”);
4

1 に答える 1

0

pushstate html5 機能を使用する場合、IE8 やその他の古いブラウザーでは機能しませんが、ajaxy-history を使用できるようにするだけの場合は、URL のハッシュ部分を使用できます。以下を使用して、URL のハッシュを変更できます。

window.location.hash="mytabid";
// url will be http://foo.com/#mytabid

これをハッシュ変更イベントと組み合わせて使用​​すると (クロスブラウザー イベントの問題を処理するには、おそらく jQuery またはプラグインを使用することをお勧めします)、[戻る] ボタンを使用したとき、または location.hash プロパティにアクセスしてページが読み込まれたときに対応できます。 .

window.onhashchange = function(a){
    console.log(a); //probably easiest to access the location.hash here.
}
于 2012-05-03T00:25:19.920 に答える