Выделите пункт подменю при просмотре - PullRequest
Новая
       33

Выделите пункт подменю при просмотре

2 голосов
/ 24 июня 2011

У меня есть меню, которое в основном представляет собой неупорядоченные списки внутри друг друга. Вот пример: 

<div id="horiz-menu" class="moomenu"><div class="wrapper">
  <ul class="menutop">
    <li><a href="something.html"><span>Home Page (top menu item)</span></a>
      <ul>
        <li><a href="something2.html"><span>Second page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
    <li class="parent active"><a href="something3.html"><span>Resources (top menu item)</span></a>
      <ul>
        <li id="current" class="active"><a href="something4.html"><span>Third Page (sub menu item)</span></a>
        </li>
        <li><a href="something5.html"><span>Fourth Page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div></div>

Это выглядит так, как будто верхние пункты меню - это меню навигации по горизонтали, а элементы подменю - это вертикальный выпадающий список (без прокрутки), когда верхний элемент меню находится над ним; скрытый другой мудрый. Это все работает. Мой вопрос заключается в том, что было бы правильным способом кодирования CSS, чтобы элементы подменю выделялись (цвет фона должен измениться), когда посетитель находится на этой странице (а не просто зависает над этим элементом меню)?

Я пробовал это: 

#horiz-menu ul li.active {background-color:#000;}
#horiz-menu ul li#current {background-color:#000;}

Я не знаю, так ли это или нет. Может кто-нибудь помочь? Если вы запутались, я хочу использовать css, чтобы раскрасить второй ul с помощью li class = "active" или id = "current". «Активный» и «текущий» идентификатор и класс применяются динамически к любому элементу списка на просматриваемой странице.

Спасибо!

Ответы [ 2 ]

1 голос
/ 03 февраля 2012

Попробуйте метод addClass в JQuery 

$("a.classname").click(function(){

    $("li#idname").addClass("active");

});
0 голосов
/ 24 июня 2011

Использование класса .active с цветом фона ДОЛЖНО работать, однако это зависит от того, какой другой CSS у вас есть.Вы должны убедиться, что специфичность .active или #current больше, чем стиль по умолчанию (#horiz-menu ul li).Кроме того, обязательно дважды проверьте, что li имеет фоновый css по умолчанию, а не привязку внутри него.

...