使用主題標籤創建彈出式窗口效果

我正在創建一個腳本，該腳本允許我根據URL的主題標籤啓動彈出式窗口。當用戶直接在地址欄中插入URL +哈希時，我可以使其工作。但是，當單擊錨點鏈接時，腳本似乎不會執行.load（）函數。我的測序是錯誤的，還是我以完全錯誤的方式進行？使用主題標籤創建彈出式窗口效果

<script> 
$(document).ready(function() { 
var loc = window.location.hash; 
var container = $('.container'); 
if (loc == "#content1") { $('.container').load('content1.html') } 
if (loc == "#content2") { $('.container').load('content2.html') } 
}); 
</script> 
<body> 

<ul class="navigation"> 
<li><a href="#content1">Launch content1</a></li> 
<li><a href="#content2">Launch content2</a></li> 
</ul> 

<div class="container"></div> 

</body>

來源

2010-06-29 Marc P

你需要要麼使一個函數調用或使用window.location或東西的效果，得到你想要的。你的jQuery代碼只在頁面加載完成後立即運行，只需單擊這些鏈接不會重新加載頁面。

來源

2010-06-29 21:37:38 Jason

你的腳本只會在第一次加載頁面時運行。當單擊包含散列片段的錨時，頁面將不會重新加載，因此$（document）.ready ...中的腳本將不會再次運行。

我認爲你要添加的jQuery的Hashchange事件插件：http://benalman.com/projects/jquery-hashchange-plugin/

然後，你可以綁定動作到hashchange事件，當用戶通過點擊您的鏈接改變了哈希代碼將執行一個回調。您的腳本最終會看起來像這樣：

$(window).bind('hashchange', function() { 
pageCaller(); 
}); 

function pageCaller() { 
var loc = window.location.hash; 
var container = $('.container'); 
if (loc == "#content1") { $('.container').load('content1.html') } 
if (loc == "#content2") { $('.container').load('content2.html') } 
} 

pageCaller();

來源

2010-06-29 21:39:42 hundredwatt

謝謝，這完全奏效！（我發佈了一個使用函數的精簡版，以使它在對自己的評論中變得更清晰。） – 2010-06-29 22:04:11

編輯我的代碼以包含您的DRYer代碼。很高興我能幫上忙！ – hundredwatt 2010-06-29 23:19:19

謝謝@hundredwatt，插件完全工作！我用一些函數（）進一步壓縮了代碼：

$(window).bind('hashchange', function() { 
pageCaller(); 
}); 

function pageCaller() { 
var loc = window.location.hash; 
var container = $('.container'); 
if (loc == "#content1") { $('.container').load('content1.html') } 
if (loc == "#content2") { $('.container').load('content2.html') } 
} 

pageCaller();

來源

2010-06-29 22:05:07

使用主題標籤創建彈出式窗口效果

回答

相關問題