Добавление активного класса в список основных вкладок

Question 1

Я хочу добавить активный класс ко всем блокам основной категории в моем html-коде следующим образом: -

<ul class="tabs">

   <li class="accordion"><a href="#tab1">Boo1</a>

           <ul id="sub-nav">
              <li><a href="http://www.myweb.com"> Ipsum Text</a></li>
              <li><a> Lorem text</a></li>
              <li><a> More lorem text </a></li>
              <li><a> Dolor Sit Amet </a></li>
           </ul>                                   

  </li> 


  <li><a href="#tab2">Boo2</a></li>
  <li><a href="#tab3">Boo3</a></li>
  <li class="last-item"><a href="#tab4">Boo4</a></li>

</ul>

Оформлен так: -

#sub-nav  > .active {background:#AAA;}
.tabs li a.active { background: green; }
.tabs li a {font-size:20px;}
#sub-nav li a {font-size:16px; margin-left:20px;}

Поэтому я сделал это: -

(function(){
    $('.tabs #sub-nav li').bind('click', function(e){
        var subNavList   = $(this),
            list = $('.tabs').find('li').add('.tabs a');
            list.removeClass('active');  


        subNavList.addClass('active').parents('li').addClass('active').children('a').addClass('active');
    });
}());

Моя единственная проблема сейчас заключается в том, что при нажатии на другой список навигации (boo2 и boo3) активный класс не применяется. Пожалуйста, проверьте код jsfiddle, чтобы лучше понять. http://jsfiddle.net/gfkM4/6/ Что я делаю не так, ребята? Не могли бы вы мне помочь?

javascript jquery

0

Yaw Ansong Snr 23 Июл 2012 в 22:19

Ну, щелчок не привязан к этим элементам. '.tabs #sub-nav li'

–

epascarello

23 Июл 2012 в 22:23

Дорогой мне! Я не знаю, что со мной было не так. Но у меня есть другая проблема. Проверьте эту скрипку: jsfiddle.net/gfkM4/8. Как мне исключить зеленый цвет для subnavs boo1, но вместо этого использовать цвет пепла по умолчанию при щелчке на boo1?

–

Yaw Ansong Snr

23 Июл 2012 в 22:32

Answer

Я считаю, что это то, что вы ищете (выберите верхнюю навигацию при нажатии также выберите как вспомогательную навигацию, так и ее родительский элемент при нажатии):

http://jsfiddle.net/gfkM4/9/

(function(){

    $('.tabs a').on('click', function(e){
        $('.tabs a').removeClass('active');
        $(this).addClass('active');
        $(this).closest('ul').closest('li').children('a').addClass('active');
    })       

}());

3

scottm 23 Июл 2012 в 22:43

Не совсем :( Я хочу, чтобы Boo1 активировался только тогда, когда щелкают подсписок (Ipsum Text и т. д.), как и в моем исходном примере. Я хочу изменить цвет подсписка. И снова, весь основной список будет иметь фон зеленого цвета, но подсписок имеет цвет: #aaa;

–

Yaw Ansong Snr

23 Июл 2012 в 23:02

Просто измените свой css с #sub-nav > .active {background:#AAA;} на #sub-nav .active {background:#AAA;}. jsfiddle.net/gfkM4/10

–

scottm

23 Июл 2012 в 23:05

Ага! моя плохая я в основном открыл не ту скрипку! Большое спасибо @scottm. самое интересное то, что ваш код тоже лаконичный :)

–

Yaw Ansong Snr

23 Июл 2012 в 23:10

Пожалуйста, проверьте эту скрипку -> jsfiddle.net/gfkM4/15, почему я не могу выбрать " а "элементы субнави?" Я хочу выбрать li основных элементов и "a" для вспомогательных элементов :(

–

Yaw Ansong Snr

25 Июл 2012 в 10:37

Question 2

Я считаю, что это то, что вы ищете (выберите верхнюю навигацию при нажатии также выберите как вспомогательную навигацию, так и ее родительский элемент при нажатии):

http://jsfiddle.net/gfkM4/9/

(function(){

    $('.tabs a').on('click', function(e){
        $('.tabs a').removeClass('active');
        $(this).addClass('active');
        $(this).closest('ul').closest('li').children('a').addClass('active');
    })       

}());

3

scottm 23 Июл 2012 в 22:43

Не совсем :( Я хочу, чтобы Boo1 активировался только тогда, когда щелкают подсписок (Ipsum Text и т. д.), как и в моем исходном примере. Я хочу изменить цвет подсписка. И снова, весь основной список будет иметь фон зеленого цвета, но подсписок имеет цвет: #aaa;

–

Yaw Ansong Snr

23 Июл 2012 в 23:02

Просто измените свой css с #sub-nav > .active {background:#AAA;} на #sub-nav .active {background:#AAA;}. jsfiddle.net/gfkM4/10

–

scottm

23 Июл 2012 в 23:05

Ага! моя плохая я в основном открыл не ту скрипку! Большое спасибо @scottm. самое интересное то, что ваш код тоже лаконичный :)

–

Yaw Ansong Snr

23 Июл 2012 в 23:10

Пожалуйста, проверьте эту скрипку -> jsfiddle.net/gfkM4/15, почему я не могу выбрать " а "элементы субнави?" Я хочу выбрать li основных элементов и "a" для вспомогательных элементов :(

–

Yaw Ansong Snr

25 Июл 2012 в 10:37

Добавление активного класса в список основных вкладок

1 ответ

Похожие вопросы

Новые вопросы

javascript