0

私はタブシステムを持っていて、決定されたタブを開くURLに移動できるようにしたいと思っています。www.site.com/tab2（優先的にSEOの場合）またはwww.site.com#tab2など。

window.locationやwindow.history.pushstate（ここに投稿）のようなメソッドを試しましたが、それらを機能させる方法がわかりませんでした。

Javascript：

(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();

                    var hash = window.location.hash;
                    var tab = parseInt(hash.replace('#',''), 10);
                    $tabsNavLis.eq(tab - 1).click();

            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 -->
4

2 に答える 2

0

この記事を読んで、あなたはそれを理解することができるはずです：

http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page

于 2012-05-03T00:01:48.343 に答える
0

を介してページのハッシュを確認するためにlilスクリプトを作成できますwindow.location.hash。

したがって、ドキュメントの準備ができたら、ハッシュを取得してから、適切なタブへのクリックをシミュレートします。このようなもの...

var hash = window.location.hash;
var tab = parseInt(hash.replace('#',''), 10);
$tabsNavLis.eq(tab - 1).click();

ハッシュにはタブのインデックスが含まれているため、これは同じように機能します。しかし、ハッシュを取得すると何ができるかがわかります。これがお役に立てば幸いです。

編集：

これはそれがどうあるべきかです...私は自分でコードを試していません。もう少しいじってもらいたい場合は、jsFiddleに入れてください。

(function($){
    $(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();

        });

        var hash = window.location.hash;
        var tab = parseInt(hash.replace('#', ''), 10);
        $tabsNavLis.eq(tab - 1).click();

    });
})(jQuery);
于 2012-05-03T00:21:25.957 に答える