Question

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

Answer 1

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

Answer 2

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

Answer 3

谢谢@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 个答案: