Использование window.location.hash в jQuery

Я хотел бы создать меню навигации с исчезающим цветом с помощью jQuery, в котором «нажатая» кнопка, соответствующая текущей странице, ведет себя иначе, чем «ненажатая» кнопка (в частности, она не исчезает до другого цвета при наведении). Если я посмотрю на пример на www.guitaracademy.nl, то увижу, что они используют нативный javascript со свойством window.location.hash.

Однако я не могу получить этот хэш в 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>

После загрузки этой страницы я нажимаю ссылку «Click me first»; затем в адресной строке я вижу «#test», добавленный к исходному URL-адресу. Однако, если я затем нажму div «Then click me», я увижу пустое предупреждение. Кажется, что хэш не «обновляется».

Буду очень признателен за любую помощь в этом.


jquery hash window.location
person Kurt Peek    schedule 24.10.2011    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Попробуйте переместить вызов хеша внутрь функции, чтобы он вызывался каждый раз, когда вызывается щелчок. Как у вас было, он загружался только при начальной загрузке страницы.

$(function(){
    $("#clickme").click(function(){
        var p=window.location.hash;
        alert(p)
    });
});
person Doozer Blake    schedule 24.10.2011
comment
Привет, да, это сработало, спасибо всем за ваши (конвергентные) ответы! - person Kurt Peek; 25.10.2011

arrow_upward
2
arrow_downward

Попробуйте поместить var p=window.location.hash; в ваш прослушиватель кликов:

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

arrow_upward
0
arrow_downward

Хэш обновляется, но в этом случае переменная «p» не обновляется.

Здесь оператор присваивания

var p=window.location.hash;

выполняется только один раз при загрузке страницы. Так что в момент загрузки значение P пусто, и всегда оно будет пустым.

Вместо

alert(p)

пытаться

alert(window.location.hash)

или переместите назначение внутри обратного вызова щелчка. то есть чуть выше предупреждения

person M S    schedule 24.10.2011

arrow_upward
0
arrow_downward

Ваша функция для div #clickme никогда не пытается обновить хэш. Если вы ожидали, что ваш код обновит хэш, вам придется манипулировать им следующим образом:

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

    //Remaining Code
});
person davidethell    schedule 24.10.2011