0

On the website im building, each tab has a class on its li of either tab1, tab2, tab3 etc

What I want to do is first check to see if a tab has a class of "cur" then if it does, check the rest of the li to see if it has another class of either "tab1", "tab2", "tab3", "tab4" or "tab5" then add that "tab" class to the body tag

to get get something like this

<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>

i've tried something like the jQuery below but it always adds an additional class of tab5 to the body as well 

 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');
    }

I know there is a much cleaner way of doing it but can't seem to work it out

I wish I could just add the class manually, but i dont have access to the HTML so have to generate it with javaScript

Any help much appreicated

Thanks

4

3 回答 3

1

仅遵循您提供的基础知识（不确定您是否使用 jQueryUI 之类的选项卡库），您可以非常轻松地简化您正在做的事情，而无需所有 ifs。

见下文：

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-liner 的故障

  • $('body') jQuery Selector - 这个抓取body元素
  • .removeClass("tab1 tab2 tab3 tab4 tab5")从元素中删除可能的类，如果元素上不存在类则没有错误，所以不用担心
  • .addClass(这开始添加你想要添加到你的 body 元素的类
  • "" + $(".cur")这里的 " 确保正确返回正则表达式匹配的字符串，当然还有你的基本 jQuery 选择器，在这种情况下使用类抓取元素cur
  • .attr("class")这旨在获取包含类的元素上的所有类cur
    • 在较新的 jQuery 版本中，您可能会考虑将其更改为.prop()
  • .match(/tab[0-9]/) ) 最后，与正则表达式一起使用的旧 JS 匹配方法仅提取tab以整数 0 到 9 开头和结尾的类名，当然还有)调用.元素上的addClass()body
于 2012-10-25T19:08:13.117 回答
0 
$('.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/

于 2012-10-25T19:00:09.577 回答
0

如果您使用：

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

您将返回一个包含与选择器匹配的所有元素的数组。然后您可以使用元素 ids ala：

var elems=$('.navigation ul li.cur');
$('body').removeClass()
elems.each(function(){
    $('body').addClass($(this).attr('id'))
})
于 2012-10-25T18:52:27.873 回答