使用主题标签创建弹出式窗口效果

我正在创建一个脚本，该脚本允许我根据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

使用主题标签创建弹出式窗口效果

回答

相关问题