javacriptで再ロードせずに各タブの特定のURL

Question

私はタブシステムを持っています。私は行きたいと思っています。 www.site.com/tab2（優先的にはSEO用）またはwww.site.com＃tab2などです。

私はwindow.locationのまたはwindow.history.pushstate（posted here）のような方法を試してみたが、私はそれらの機能にする方法を知りませんでした。

---

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

Answer 1

この記事を読んで、あなたはそれを把握することができるはずです。

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

Answer 2

lilスクリプトを作成して、window.location.hashからページのハッシュを見ることができます。

文書の準備ができたら、ハッシュを取得して、適切なタブにクリックをシミュレートします。このようなもの...

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

Thoこれは、ハッシュがそのタブのインデックスを持っているため、動作します。しかし、あなたはハッシュを持っていれば何ができるかを見ています。私はこれが助けて欲しい！

EDIT：

これは私が自分自身のコードを試していないカントーそれは...どのようにすべきです。あなたが私にもう少しそれを混乱させたい場合は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); 

私は直後ことを追加