我试图通过使用散列变量来访问页面中的某些选项卡。
它按预期工作:
- 页面内的链接
- 使用地址 (test.php#tab2) 打开一个新的浏览器窗口/标签
它在以下情况下不起作用:
- 当您已经加载了
test.php并在地址栏中手动输入“#tab2”(使其成为test.php#tab2并按回车结束) .页面未加载且脚本未运行。
我在不同的浏览器上试过了，结果都差不多。在 Chrome 中，您可以在地址栏中选择整个 url，然后(再次)按 enter，这有效 - 但一般来说它是相同的问题。
我已经从我的页面中取出脚本并制作了一个小模板，完整代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<script type="text/javascript" src="inc/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.showPage = function(hash) {
if (hash === '#tab1' || hash === '') {
if ($('#tab1').is(':hidden')) {
$('#tab1').show();
$('#tab2, #tab3').hide();
}
} else if (hash === '#tab2') {
if ($('#tab2').is(':hidden')) {
$('#tab2').show();
$('#tab1, #tab3').hide();
}
} else if (hash === '#tab3') {
if ($('#tab3').is(':hidden')) {
$('#tab3').show();
$('#tab1, #tab2').hide();
}
}
}
$('.menu').click(function(e){
e.preventDefault();
var hash = $(this).attr('id');
window.location.href = 'test.php' + hash;
$(document).showPage(hash);
});
var hash = location.hash;
$(document).showPage(hash);
});
</script>
</head>
<body>
<a href="#" id="#tab1" class="menu">Tab 1</a> <a href="#" id="#tab2" class="menu">Tab 2</a> <a href="#" id="#tab3" class="menu">Tab 3</a>
<div id="tab1">
Tab 1
</div>
<div id="tab2" style="display:none;">
Tab 2
</div>
<div id="tab3" style="display:none;">
Tab 3
</div>
</body>
</html>
我希望我已经说得够清楚了。感谢任何反馈!
最佳答案
如果页面已加载并且您将 #... 附加到 URL，则不会执行任何操作，因为您不会触发 .menu 单击处理程序，并且不会执行任何操作else 使 .showPage 函数执行。
您可能想改用 window 的 hashchange 事件。这样，每当哈希发生变化(链接/手动/等)时，您都可以执行 .showPage。
$(window).bind('hashchange', function(){
$(document).showPage(location.hash); // does include the # for the record
});
关于javascript - 手动输入url时location.hash问题，脚本不运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6857982/