jsFiddle

Question

在网站构建中，每个标签都有一个类别，包括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生成它

任何有用的帮助

谢谢

Answer 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线的细分

$('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整数结束的类名，当然还有结束{{1} } {} .addClass()对元素)

Answer 2

如果您使用：

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

您将获得与选择器匹配的所有元素的数组。然后，您可以使用元素ids ala：

var elems=$('.navigation ul li.cur');
$('body').removeClass()
elems.each(function(){
    $('body').addClass($(this).attr('id'))
})

Answer 3

$('.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/

jQuery将活动选项卡类添加到Body标记

3 个答案:

jsFiddle