在 jQuery 中使用 window.location.hash

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7880669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:24:03  来源:igfitidea点击:

Using window.location.hash in jQuery

jqueryhashwindow.location

提问by Kurt Peek

I would like to make a color fading navigation menu using jQuery, in which the "pressed" button corresponding to the current page behaves differently from the "unpressed" button (specifically, it doesn't fade to a different color upon hovering). If I look at the example at www.guitaracademy.nl, I see that they use native javascript with the window.location.hash property.

我想使用 jQuery 制作一个褪色导航菜单,其中与当前页面对应的“按下”按钮与“未按下”按钮的行为不同(特别是,它在悬停时不会褪色为不同的颜色)。如果我查看 www.guitaracademy.nl 上的示例,我会发现他们使用带有 window.location.hash 属性的原生 javascript。

However, I can't seem to get this hash into jQuery. Here is an example script:

但是,我似乎无法将此哈希值放入 jQuery。这是一个示例脚本:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var p=window.location.hash;
    $("#clickme").click(function(){
        alert(p)
    });
});
</script>
</head>
<body>
<a href="#test">Click me first</a>
<div id="clickme">Then click me</div>
</body>
</html>

After loading this page, I click the "Click me first" link; then in the address bar I see "#test" appended to the original URL. However, if I then click the "Then click me" div I see an empty alert. It seems like the hash is not 'updating'.

加载此页面后,我单击“首先单击我”链接;然后在地址栏中我看到“#test”附加到原始 URL。但是,如果我然后单击“然后单击我”div,我会看到一个空警报。似乎哈希不是“更新”。

I would greatly appreciate any help on this.

我将不胜感激对此的任何帮助。

回答by Doozer Blake

Try moving the call for the hash to inside the function so that it gets called each time the click is called. The way you had it, it was only loading on the initial load of the page.

尝试将哈希调用移动到函数内部,以便每次调用点击时都会调用它。按照您的方式,它仅在页面初始加载时加载。

$(function(){
    $("#clickme").click(function(){
        var p=window.location.hash;
        alert(p)
    });
});

回答by Seybsen

Try putting var p=window.location.hash;inside your click-listener:

尝试放入var p=window.location.hash;你的点击监听器:

<script type="text/javascript">
    $(function(){
        $("#clickme").click(function(){
            var p=window.location.hash;
            alert(p)
        });
    });
</script>

回答by M S

The hash is getting upadated but in this case the variable 'p' is not getting updated.

散列正在更新,但在这种情况下,变量“p”没有更新。

Here the assignment statement

这里是赋值语句

var p=window.location.hash;

is executed only once when the page is loaded. So at the time of loading the value of P is empty, and always it will be empty.

页面加载时只执行一次。所以在加载时 P 的值为空,并且始终为空。

Instead of

代替

alert(p)

try

尝试

alert(window.location.hash)

or move the assignment inside the click callback. i.e just above alert statement

或在点击回调中移动分配。即就在警报声明之上

回答by davidethell

Your function for the #clickmediv never attempts to update the hash. If you were expecting your code to update the hash you'll have to manipulate it like:

您的#clickmediv函数从不尝试更新哈希。如果您希望代码更新哈希,则必须像这样操作它:

$("#clickme").click(function(){
    window.location.hash='#secondclick';

    //Remaining Code
});