手動輸入url時，location.hash出現問題，腳本未運行

我試圖通過使用散列變量來達到頁面中的某些選項卡。手動輸入url時，location.hash出現問題，腳本未運行

其工作原理適用於：頁面

打開一個新的瀏覽器窗口/標籤與ADRESS內

鏈接（test.php的＃TAB2）

它不工作當：

當你有test.php已經加載，並在地址欄中手動輸入「#tab2」（使其成爲test.php#tab2並用回車完成）。該頁面不加載並且腳本未運行。

我試過它在不同的瀏覽器中，結果差不多。在Chrome中，您可以在地址欄中選擇整個網址，然後按回車（再次），即可使用 - 但總的來說，這是同樣的問題。

我已經採取了腳本我的網頁，並做了一個小的模板，在全碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-language" content="en" /> 
<script type="text/javascript" src="inc/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $.fn.showPage = function(hash) { 
     if (hash === '#tab1' || hash === '') { 
      if ($('#tab1').is(':hidden')) { 
       $('#tab1').show(); 
       $('#tab2, #tab3').hide(); 
      } 
     } else if (hash === '#tab2') { 
      if ($('#tab2').is(':hidden')) { 
       $('#tab2').show(); 
       $('#tab1, #tab3').hide(); 
      } 
     } else if (hash === '#tab3') { 
      if ($('#tab3').is(':hidden')) { 
       $('#tab3').show(); 
       $('#tab1, #tab2').hide(); 
      }  
     }  
    } 

    $('.menu').click(function(e){ 
     e.preventDefault(); 
     var hash = $(this).attr('id'); 
     window.location.href = 'test.php' + hash; 
     $(document).showPage(hash); 
    }); 

    var hash = location.hash; 
    $(document).showPage(hash); 
}); 
</script> 
</head> 

<body> 

<a href="#" id="#tab1" class="menu">Tab 1</a> <a href="#" id="#tab2" class="menu">Tab 2</a> <a href="#" id="#tab3" class="menu">Tab 3</a> 

<div id="tab1"> 

Tab 1 

</div> 

<div id="tab2" style="display:none;"> 

Tab 2 

</div> 

<div id="tab3" style="display:none;"> 

Tab 3 

</div> 

</body> 
</html>

我希望我做了我自己很清楚。感謝任何反饋！

來源

2011-07-28 Mattis

，你追加#...的URL，執行任何操作，因爲你不觸發.menu單擊處理程序，並沒有別的使得.showPage功能執行。

您可能希望使用事件window代替。這樣，每當哈希值改變（鏈接/手動/等），你可以執行.showPage。

http://jsfiddle.net/yJTJz/

$(window).bind('hashchange', function(){ 
    $(document).showPage(location.hash); // does include the # for the record 
});

來源

2011-07-28 11:18:17 pimvdb

是的，你是正確的哈希改變機制的實現不同瀏覽器。要從瀏覽器中抽象出來，你可以使用這個plugin。實際上，由於大多數現代瀏覽器都支持手動歷史管理和使用狀態機制，所以實際上並沒有過時。用幾句話來說，這個機制允許你改變頁面的url，而不用重新加載它。如果頁面加載，你可以閱讀更多關於這個TECHNIC here

來源

2011-07-28 11:17:54 bjornd

謝謝你，我很可能會使用該插件。 – Mattis

手動輸入url時，location.hash出現問題，腳本未運行

回答

相關問題