jQuery добавляет активный класс вкладки в тег Body

На веб-сайте im building каждая вкладка имеет класс li tab1, tab2, tab3 и т. Д.

То, что я хочу сделать, это сначала проверить, есть ли у вкладки класс "cur", а затем, если он есть, проверить оставшуюся часть библиотеки li, чтобы увидеть, есть ли у нее другой класс: "tab1", "tab2", "tab3". ", "tab4"или"tab5"затем добавьте этот класс" tab "в тег body

чтобы получить что-то вроде этого

<body class="tab2">


<div class="nav">
<ul>
    <li class="current1 tab1">First Tab</li>
    <li class="current1 cur sub tab2">Second Tab</li>
    <li class="current1 sub tab3">Third Tab</li>    
    <li class="current1 sub tab4">Fouth Tab</li>    
    <li class="current1 sub tab5">Fifth Tab</li>    
</ul></div>

я пробовал что-то вроде jQuery ниже, но он всегда добавляет дополнительный класс tab5 к телу

 if ( $('.navigation ul li.tab1').hasClass('cur') ) {
        $('body').addClass('tab1'); 
     } else if ( $('.navigation ul li.tab2').hasClass('cur') ) {
        $('body').addClass('tab2'); 
    } else if ( $('.navigation ul li.tab3').hasClass('cur') ) {
        $('body').addClass('tab3'); 
    } else if ( $('.navigation ul li.tab4').hasClass('cur') ) {
        $('body').addClass('tab4'); 
    } else ( $('.navigation ul li.tab5').hasClass('cur') ); {
        $('body').addClass('tab5');
    }

Я знаю, что есть намного более чистый способ сделать это, но не могу решить это

Я хотел бы просто добавить класс вручную, но у меня нет доступа к HTML, поэтому нужно сгенерировать его с помощью javaScript

Любая помощь очень ценится

Спасибо

Источник

3 ответа

Следуя только предоставленным вами основам (не уверены, используете ли вы библиотеку вкладок откуда-то вроде jQueryUI), вы можете очень легко упростить то, что вы делаете, без всех if.

Увидеть ниже:

var patt = new RegExp(/tab[0-9]/),
    tabClass = "" + $(".cur").attr("class").match(patt);
$('body').removeClass("tab1 tab2 tab3 tab4 tab5")
    .addClass("" + tabClass); // the "" + is required

Как одна линия:

$('body').removeClass("tab1 tab2 tab3 tab4 tab5").addClass("" + $(".cur").attr("class").match(/tab[0-9]/));

jsFiddle

Поломка 1-го лайнера

  • $ ('body') jQuery Selector - этот захватывает body элемент
  • .removeClass("tab1 tab2 tab3 tab4 tab5") удаляет возможные классы из элемента, без ошибок, если класс не существует в элементе, поэтому не стоит беспокоиться
  • .addClass( начинается добавление класса, который вы хотите добавить к элементу тела
  • "" + $ (". cur") Здесь "" обеспечивает правильное возвращение строки для соответствия регулярному выражению и, конечно, ваш базовый селектор jQuery снова, в этом случае захват элементов с классом cur
  • .attr("class") Это пытается получить все классы на элементе, содержащем класс cur
    • в более новых версиях jQuery вы можете изменить это на .prop ()
  • .match (/ tab [0-9] /)) Наконец, старый метод сопоставления JS, используемый с regex для извлечения только имени класса, начинающегося с tab и заканчивается целым числом от 0 до 9 и, конечно, закрытие ) для вызова .addClass() для элемента body
Источник 
$('.nav li').click(function(){
    $('.nav li').removeClass('active');
    // set the attribute of tab that was clicked as active
    $(this).attr('class', 'active');                
});

Найдите jsfiddle здесь:http://jsfiddle.net/P5Kzr/

Источник

Если вы используете:

$('.navigation ul li.cur');

вы получите массив всех элементов, которые соответствуют селектору. Затем вы можете использовать идентификаторы элементов ala:

var elems=$('.navigation ul li.cur');
$('body').removeClass()
elems.each(function(){
    $('body').addClass($(this).attr('id'))
})
Источник
Другие вопросы по тегам