Блог

Главная - Вопросы по программированию - Я хочу, чтобы верхняя вкладка оставалась включенной при нажатии

Я хочу, чтобы верхняя вкладка оставалась включенной при нажатии

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Привет, я использую это меню, найденное здесь:http://www.sohtanaka.com/web-design/examples/horizontal-subnav /

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

Верхняя навигация все еще должна быть активной при загрузке новой страницы. Я знаю, как сделать это на стороне сервера, но не на стороне клиента с помощью JS / jQuery

Ответ №1:

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

 $("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color   image on hovered list item
    $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

Если вы хотите, чтобы панель subnav оставалась видимой после щелчка или чего-то еще, просто создайте оператор if () в функции «наведение курсора мыши», которая проверяет, было ли что-то нажато, т.Е.

 } , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    if(subnavclick==0){
        $(this).find("span").hide(); //Hide the subnav
    }
});

И в вашей функции subnav .click () добавьте настройку subnavclick переменной следующим образом:

  $("span").click(function(){
   subnavclick==1;
   //do other stuff
 });

Это должно сработать для вас….

Ответ №2:

Попробуйте изменить 

     $("ul#topnav li").hover(function() { //Hover over event on list item
      $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color   image on hovered list item
      $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
      $(this).css({ 'background' : 'none'}); //Ditch the background
      $(this).find("span").hide(); //Hide the subnav
    });

Для

     $("ul#topnav li").click(function() { //Hover over event on list item
      $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color   image on hovered list item
      $(this).find("span").show(); //Show the subnav
}

Ответ №3:

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

Ответ №4:

Большая часть js-кода избыточна, поскольку функциональность в любом случае обеспечивается css. Просто добавьте класс «clicked», который имитирует псевдокласс li при наведении курсора мыши, и добавляйте и удаляйте это по щелчку.

http://jsfiddle.net/VirusZ/THYsK/

Также вы должны обновить z-индексы, чтобы подменю отображалось при наведении курсора мыши, даже если виден выбранный элемент.

Комментарии:

1. Это работало до тех пор, пока я не загружу новую страницу, все ссылки sub-nav в меню вызывают новую страницу. Итак, как я могу сохранить инструкцию active при загрузке новой страницы? Возможно, я не совсем ясно представлял, чего я хотел.

2. @n3tx В этом случае вы должны сделать то, что предложил @Dutchie432: поиск по ajax. Это довольно сложно, и вам придется немного изучить javascript, если вы еще не знаете. Я лично использую jQuery, чтобы упростить жизнь: api.jquery.com/jQuery.get . Также я рекомендую прочитать это: github.com/balupton/history.js/wiki/Intelligent-State-Handling . Это отличная библиотека, используемая для разрешения обработки состояния без обновления страницы.

3. @n3tx также вы можете проверить эту скрипку: jsfiddle.net/VirusZ/THYsK/4 для краткого примера прослушивания кликов по якорям и асинхронного извлечения / замены содержимого.

Ответ №5:

Для обобщения вам нужно будет сделать это в вашем CSS-файле и в JS. Вы захотите найти ul#topnav li:hover{...} и клонировать ее во что-то вроде ul#topnav li.active{...} . Это класс, который мы применим к текущему выбранному пункту меню.

 ul#topnav li.current{
    background: #f00 url(topnav_current.gif) repeat-x;
}

От этого будет зависеть, как именно будет работать ваш сайт. Будет ли каждая вкладка переводить вас на новую страницу, или нажатие на вкладку вызовет поиск ajax?

Если вы используете AJAX, вы можете фиксировать события щелчка LI, чтобы задать класс. (ЖИВАЯ ДЕМОНСТРАЦИЯ). Если вы переходите на новую страницу при каждом нажатии, вам нужно, чтобы JS анализировал URL-адрес и устанавливал правильный класс элемента с помощью $(item).addClass('current');