使用window.location。在jQuery散列

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制作一个颜色淡入的导航菜单，其中对应于当前页面的“按下”按钮与“unpressed”按钮的行为不同(具体来说，鼠标悬停时不会褪色)。如果我查看www.guitaracademy.nl中的示例，会发现它们在windows .location中使用本地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.

我将非常感谢在这方面的任何帮助。

4 个解决方案

#1

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)
    });
});

#2

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>

#3

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

或者在单击回调中移动分配。我。e刚好在警报声明之上

#4

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

#clickme div的函数从不尝试更新散列。如果您希望您的代码更新散列，您将不得不像以下那样操作它:

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

    //Remaining Code
});

#1