Изменить свойство CSS на каждой странице с помощью jQuery

Question

Я пытаюсь сделать навигационное меню для сайта. Событие при наведении (jQuery) изменяется <div>положение фона, чтобы пользователь мог видеть, куда он указывает. Конечный эффект, которого я хочу достичь, выглядит следующим образом:

http://jsfiddle.net/WAckU/

Проблема с этим решением заключается в том, что когда я нажимаю на <li> (изменения страницы) Я теряю переменную (фоновая установка сбрасывается) Так что мне интересно, есть ли какое-нибудь решение, возможно, просто добавление CSS-класса к элементу, на который я нажимаю (похоже на некоторые темы Wordpress)? Я также хотел бы избежать сохранения значения с помощью куки.

Answer 1

Проверьте текущую страницу в window.location.href и установите фоновое изображение изначально в зависимости от него

var currentpage = window.location.href.split("/").pop();
switch(currentpage){
    case "page1.php": $(".topmenu").css('background-position', position1);break;
    case "page2.php": $(".topmenu").css('background-position', position2);break;
    ...
}

Answer 2

Почему бы вам просто не инициализировать переменную значением, которое вы хотите на каждой странице? Или, если вы не хотите делать исключения, попросите js взглянуть на URL, чтобы выяснить, где он находится.