Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Добавление/удаление класса активному пункту мменю

Автор: dеluxe 25.8.2010, 22:02

Есть такая структура меню

Код


<ul id="menu">
     <li><a href="#">Черепица</a>
     
           <ul class="submenu">
                 <li><a href="#">черепица битумная</a>
              
                       <ul class="submenu2">
                              <li><a href="#">черепица битумная</a></li>
                              <li><a href="#">черепица металлическая</a></li>
                        </ul>
                </li>
                <li><a href="#">черепица металлическая</a></li>
           </ul>
      </li>

     <li><a href="#">Утеплители</a></li>
</ul>

Как можно на jquery или js добавить какой то класс при открытом(активном) пункте

то бишь сюда в ссылку или в li

Код


 <ul id="menu">
     <li><a href="#">Черепица</a>
     ...

и сюда

Код


 <ul class="submenu">
                 <li><a href="#">черепица битумная</a>
                 ...

вся реализация проверки на визибл и хайд соответствено по клику есть.. только нужно как-то добавить классы. Жалко нет кода под рукой так бы показал что там есть. Был бы очень благодарен.

У меня выходило только добавляет всем ссылкам класс в .menu, а нельзя как-то пройти только до первой через массив ссылок на странице типо выбрать так первую только, как это делать хз(

Автор: Amphiluke 25.8.2010, 22:55

Добавление/удаление класса в JQuery — методы addClass/removeClass. В «чистом» Javascript нужно орудовать атрибутом className. Это, я думаю, вы и сами прекрасно знаете…

Цитата(dеluxe @ 26.8.2010, 02:02

)

У меня выходило только добавляет всем ссылкам класс в .menu, а нельзя как-то пройти только до первой через массив ссылок на странице типо выбрать так первую только

Получив с помощью JQuery коллекцию гиперссылок, можно отобрать из нее лишь нужные, обращаясь по индексу:

Код


$(".menu a")[0].addClass("expanded");

либо так:

Код


$(".menu a:first").addClass("expanded");

либо так:

Код


$(".menu a:eq(0)").addClass("expanded");

и т.д.

Автор: Amphiluke 25.8.2010, 23:25

Прошу прощенья: поторопился с прямой индексацией в квадратных скобках. При этом, конечно, возвращается не объект JQuery с набором соответствующих методов, а обычный DOM-объект, у которого нет метода addClass и т.д. Поэтому если делать через прямую индексацию в квадратных скобках, то будет это возврат к обычной работе с атрибутом className.

Код


$(".menu a")[0].className = "expanded";

Автор: dеluxe 26.8.2010, 17:56

Amphiluke, Спасибо очень помогло smile