Question

我试图通过使用哈希变量来访问页面中的某些选项卡。

它适用于：

页面内的链接
使用地址打开新的浏览器窗口/标签（test.php＃tab2）

在以下情况下不起作用：

当您已加载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>

我希望我已经足够清楚了。感谢任何反馈！

Answer 1

如果页面已加载并且您将#...附加到URL，则不执行任何操作，因为您没有触发.menu单击处理程序，并且没有其他任何内容使.showPage函数执行

您可能希望使用hashchange的{{1}}事件。这样，无论何时哈希值发生变化（链接/手动/等），您都可以执行window。

http://jsfiddle.net/yJTJz/

.showPage

Answer 2

是的，您正确实现的哈希更改机制因浏览器而异。要从浏览器中抽象，您可以使用此plugin。实际上并不是有点过时，因为大多数现代浏览器都支持手动历史管理和使用状态机制。在几个单词中，这种机制允许您更改页面的URL而不实际重新加载它。您可以阅读有关此技术的更多信息here

手动输入url时，location.hash问题，脚本未运行

2 个答案: