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

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

javascript jquery html

Javascript location.hash问题手动输入url时，脚本未运行,javascript,jquery,html,Javascript,Jquery,Html,我试图通过使用散列变量来访问页面中的某些选项卡其工作原理如下：页面内的链接使用地址test.phptab2打开新的浏览器窗口/选项卡在以下情况下，它不起作用：当您已经加载test.php并手动在地址栏中输入tab2，使其成为test.phptab2，然后使用enter结束。页面未加载，脚本未运行。我在不同的浏览器中尝试过，结果基本相同。在Chrome中，您可以在地址栏中选择整个url，然后再次按enter键，这是可行的，但一般来说，这是相同的问题我从页面中取出脚本，制作了一个小模板

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

其工作原理如下：

页面内的链接使用地址test.phptab2打开新的浏览器窗口/选项卡在以下情况下，它不起作用：

当您已经加载test.php并手动在地址栏中输入tab2，使其成为test.phptab2，然后使用enter结束。页面未加载，脚本未运行。我在不同的浏览器中尝试过，结果基本相同。在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，而无需重新加载页面。您可以阅读有关此技术的更多信息

是的，您是对的，散列更改机制的实现在不同浏览器中有所不同。要从浏览器中提取内容，可以使用此选项。实际上，它并没有过时，因为大多数现代浏览器都支持手动历史管理和使用状态机制。简单地说，这种机制允许您更改页面的url，而无需重新加载页面。如果页面已加载并附加了。。。对于URL，不会执行任何操作，因为您没有触发.menu click处理程序，其他操作都不会执行.showPage函数

您可能希望改用window的hashchange事件。这样，每当哈希更改link/manually/etc时，就可以执行.showPage

如果页面已加载，并且您附加了。。。对于URL，不会执行任何操作，因为您没有触发.menu click处理程序，其他操作都不会执行.showPage函数

您可能希望改用window的hashchange事件。这样，每当哈希更改link/manually/etc时，就可以执行.showPage

谢谢，我可能会用那个插件。谢谢，我可能会用那个插件。

$(window).bind('hashchange', function(){
    $(document).showPage(location.hash); // does include the # for the record
});