Главная навигация принимает стиль наведения при загрузке страницы

Question

У меня есть горизонтальное навигационное меню, над которым я работаю.У меня осталась одна проблема с этим меню.Когда пользователь переходит на страницу, я бы хотел, чтобы основной пользователь оставался в безопасности.Прямо сейчас li не остается в зависшем состоянии и просто возвращается к дефолту.Нужно ли давать организму класс для этой работы или есть другой способ?Фрагмент кода можно найти здесь: http://jsfiddle.net/SeasonEnds/LSmfN/

В идеале, вкладка «Чтение» должна принимать стили наведения при загрузке страницы, но уходить, когда пользователь наводит курсор на другие основные навигационные ссылки.

Answer 1

Меню не может узнать, на какой странице оно находится, без того, чтобы сервер установил активный элемент меню, или JS не указал активный элемент.

Вот что вы можете сделать - добавить класс "здесь"чтобы указать текущую позицию:

ul#topnav li:hover, ul#topnav li.here {background: #f3f3f3;

Определить текущую страницу, используя js:

//var here = document.location+"" //for production
var here = "/home.html" //for testing  
 if(here.indexOf("home.html")>-1) {

     $('ul#topnav li').eq(0).addClass('here')
     $('ul#topnav li').mouseout(function() {
          $('ul#topnav li').removeClass('here')
     })
 } //repeat for all pages

Answer 2

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

Я немного изменил CSS:

ul#topnav li.on a    {color:#828282; background: #f3f3f3; }
ul#topnav li a:hover {background: #f3f3f3; color:#828282;}
ul#topnav li a:visited {color:#828282; }

Я также добавил немного jQuery, чтобы сохранить цвет активной ссылки верхнего уровня, когда вы наводите курсор на дочерние элементы:

$("li a").hover(function(){
    $(this).parent().prev().toggleClass("top-level-highlight");
});

Обновленная скрипка: http://jsfiddle.net/LSmfN/14/