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

【问题标题】：Creating a pop-in window effect with hashtags使用主题标签创建弹出窗口效果
【发布时间】：2010-06-29 21:33:47
【问题描述】：

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

【问题讨论】：

标签： javascript jquery url permalinks

【解决方案1】：

您将需要创建一个函数来调用或使用window.location 或类似的东西来获得您想要的东西。您的 jQuery 代码仅在页面加载后立即运行，并且仅单击这些链接不会重新加载页面。

【讨论】：

【解决方案2】：

感谢@hundredwatt，该插件完全有效！我用一些 function() 动作进一步压缩了代码：

$(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();

【讨论】：

【解决方案3】：

您的脚本只会在页面首次加载时运行。单击包含散列片段的锚点时，页面不会重新加载，因此您在 $(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();

【讨论】：

谢谢，这完全有效！（我在给自己的评论中发布了一个使用函数使其更清晰的精简版。）