將哈希值傳遞給Jquery .load（）函數

我正在構建一個基本站點，用戶單擊一個鏈接，Jquery使用jquery的load（）方法通過對服務器的異步請求填充id =「article」的div。這是HTML：將哈希值傳遞給Jquery .load（）函數

<a href="#targetpage.html" onclick="menu('targetpage.html');"> TARGET PAGE</a>

調用此很簡單的功能：

var menu = function(page){ $('#article').load(page); //other code };

它工作正常。

但是，我希望用戶能夠使用永久鏈接，如 www.mysite.com/index.html#targetpage.html，我期望js能夠讀取URL中的哈希值並相應地填充div。

問題是，當我嘗試將值window.location.hash傳遞給函數，（在加載或就緒狀態），一切都卡住了，我的js不再工作。我也嘗試用ajax（）而不是load（）函數，但它也不接受這個值。

編輯如果我嘗試

var thispage = document.location.hash; 
var hash = thispage.replace(/^#/, '');

和類型mysite.com/#page_one.html，警告說：

page_one.html,

這是很好的！但是然後

menu(hash);

不會將page_one.html的內容加載到div中。但是，點擊我的菜單工作正常。在js控制檯中我沒有任何錯誤和警告。這裏是整個代碼involed：

<head><script type="text/javascript" charset="iso-8859-1"> 
var thispage = document.location.hash; 
var hash = thispage.replace(/^#/, ''); 
alert(hash); 
menu = function(page){ 
    $('#article').load(page); 
    }; 
menu(hash); 
</script> 
</head> 
<body> 
<div id="menu"> 
<ul> 
<li><p class="menuvoice"> 
     <a href="#page_one.html" onclick="menu('page_one.html');"> 
      Page One</a></p></li> 
<li><p class="menuvoice"> 
     <a href="#page_two.html" onclick="menu('page_two.html');"> 
      Page Two</a></p></li> 
</ul> 
</div> 
<div id="article"></div>

來源

2012-04-25 mastazi

您是否希望從加載目標網頁的元素與'targetpage.html'的'id'屬性？如果出現這種情況，那麼在錨點末尾有'.html'這個事實看起來很奇怪。 – 2012-04-25 08:13:07

是的，你是對的，當然附加。html是沒有必要的，我只是作爲一個約定來使用它。 – mastazi 2012-04-25 08:18:10

您的控制檯中是否有錯誤輸出？這將有助於確定問題。

你可以嘗試在發送到你的「菜單」功能之前提醒檢索到的散列值，這樣你就會知道它是否正確（我想知道＃符號是不是附加到散列，這會在你的問題中造成問題情況下，我想）

來源

2012-04-25 08:30:43 Gaet

是的，我擺脫了散列符號。請參閱編輯以獲取更多解釋！ – mastazi 2012-04-26 06:14:17

根據你的編輯，我會說你的問題來自於你的「文章」div不存在，當你在頭部調用你的「菜單」功能。嘗試將你的代碼包裝在一個準備好的處理程序中，並查看它是否像這樣工作：' – Gaet 2012-04-26 08:42:03

是的!!!你是絕對正確的，代碼必須在頁面加載後執行！我包裝'菜單（散列）;'這樣：'window.onload = function（）{menu（hash）};'現在它完美的工作，謝謝你隊友！ – mastazi 2012-04-26 10:17:45

如何使用jQuery hashchange插件？

http://benalman.com/projects/jquery-hashchange-plugin/

它將處理在解析當前的散列當它改變了工作（即當你點擊一個鏈接或重新裝入新的哈希頁）。

編輯。示例用法：

$(function(){ 
    // Bind an event to window.onhashchange that, when the hash changes, gets the 
    // hash and adds the class "selected" to any matching nav link. 
    $(window).hashchange(function(){ 
    var hash = location.hash; 

    // Set the page title based on the hash. 
    document.title = 'The hash is ' + (hash.replace(/^#/, '') || 'blank') + '.'; 

    // Iterate over all nav links, setting the "selected" class as-appropriate. 
    $('#nav a').each(function(){ 
     var that = $(this); 
     that[ that.attr('href') === hash ? 'addClass' : 'removeClass' ]('selected'); 
    }); 
    }) 

    // Since the event is only triggered when the hash changes, we need to trigger 
    // the event now, to handle the hash the page may have loaded with. 
    $(window).hashchange(); 
});

來源

2012-04-25 08:25:42 VisioN

謝謝這個插件似乎很有用！然而，目前我只需要在頁面加載時（例如某人輸入http：// mysite /＃some_hash）讀取哈希值，而不是每次更改哈希值（請參閱上面的代碼以獲取更多信息）。 – mastazi 2012-04-26 06:20:37

試試這個：

var hash = window.location.hash; 
if (hash) { 
    var hash = hash.replace(/#/, ''); 
    // Your function using hash 
}

來源

2012-04-25 08:31:55

是的，我正在做，但我的菜單功能不接受哈希值。查看編輯瞭解更多信息！ – mastazi 2012-04-26 06:17:15

另外，根據警報結果，它看起來正確！ – mastazi 2012-04-26 06:21:28

將哈希值傳遞給Jquery .load（）函數

回答

相關問題