我正在创建一个脚本,允许我根据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>
答案 0 :(得分:0)
你需要创建一个函数来调用或使用window.location
或其他类似的东西来获得你想要的东西。您的jQuery代码仅在加载页面后立即运行,只需单击这些链接就不会重新加载页面。
答案 1 :(得分:0)
您的脚本仅在首次加载页面时运行。当单击包含散列片段的锚点时,页面将不会重新加载,因此$(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();
答案 2 :(得分:0)
谢谢@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();