重定向hashbang與history.js

到URL我注意到，history.js在支持HTML5的瀏覽器會自動更改重定向hashbang與history.js

http://www.site.com/some/path#/other/path

到

http://www.site.com/other/path

。這很好，但實際上並未將瀏覽器重定向到/ other /路徑，它只是更改地址欄中的網址。我需要它也重定向。我確實試圖抓住這個：

<script> 
    $(function() { 
     $(window).on('statechange', function() { 
      var State = History.getState(); 
      console.log('state', State.url); 
     }); 
    }); 
</script>

但statechange事件從來沒有發生......所以我怎麼做重定向？

來源

2013-01-05 Dan Caragea

您需要依靠的URL，這和我們有像Backbone.js的路由大框架，甚至插件，像history.js

但是，如果沒有這個插件u能得到URL中的散列爆炸和應用列表的活動樣式對應於它。

爲了做到這一點HTML必須是那種喜歡這樣，

<ul id="ulid" class=""> 
     <li class=""> 
      <a href="#tab=one" id="one" class="active">text1</a> 
     </li> 
     <li> 
      <a href="#tab=two" id="two" class="">text2</a> 
     </li> 
     <li> 
      <a href="#tab=three" id="three" class="">text3</a> 
     </li> 
     <li> 
      <a href="#tab=four" id="four" class="">text4</a> 
     </li> 
     <li> 
      <a href="#tab=five" id="five" class="">text5</a> 
     </li> 
     <li> 
      <a href="#tab=six" id="six" class="">text6</a> 
     </li> 
    </ul>

凡活動類的CSS可能是：.active{background-color: red;}

短的代碼添加用於獲取哈希爆炸是：

function parseHashBangArgs(aURL) { 

aURL = aURL || window.location.href; 

var vars = {}; 
var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&'); 

for(var i = 0; i < hashes.length; i++) { 
    var hash = hashes[i].split('='); 

    if(hash.length > 1) { 
     vars[hash[0]] = hash[1]; 
    } else { 
     vars[hash[0]] = null; 
    }  
} 

return vars; 
}

然後，您可以在頁面加載時運行此代碼

$('ul#ulid li a').click(function(){ 
    $('li a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

var selectedTab = parseHashBangArgs(window.location.href).tab; 
if(selectedTab){ 
    $('li a').removeClass('active'); 
    $('#'+selectedTab).addClass('active'); 
}

它完成了！

來源

2013-08-05 13:35:36

重定向hashbang與history.js

回答

相關問題