我试图通过使用哈希变量来访问页面中的某些选项卡。
它适用于:
在以下情况下不起作用:
test.php
并在地址栏中手动输入“#tab2”(使其成为test.php#tab2
并以enter结束)。页面未加载,脚本未运行。我在不同的浏览器中尝试过,结果或多或少相同。在Chrome中,您可以在地址栏中选择整个网址,然后按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>
我希望我已经足够清楚了。感谢任何反馈!
答案 0 :(得分:3)
如果页面已加载并且您将#...
附加到URL,则不执行任何操作,因为您没有触发.menu
单击处理程序,并且没有其他任何内容使.showPage
函数执行
您可能希望使用hashchange
的{{1}}事件。这样,无论何时哈希值发生变化(链接/手动/等),您都可以执行window
。
.showPage
答案 1 :(得分:1)