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

时间:2011-07-28 11:10:37

标签: javascript jquery html

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

它适用于:

  • 页面内的链接
  • 使用地址打开新的浏览器窗口/标签(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>

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

2 个答案:

答案 0 :(得分:3)

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

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

http://jsfiddle.net/yJTJz/

.showPage

答案 1 :(得分:1)

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