javascript - 使用 jQuery 添加类，但要确保它在类之后使用所有标签

Question

我不确定如何在标题中表达这一点，但假设您有这样的内容:

    <script type="text/javascript">

    $(document).ready(function(){
        $('#tabp1').show();
        $('#tabp2').hide();
        $('#tabp3').hide();
        $('#tab1').addClass("activeTab");
        $('#tab1').css("activeTab");
    })

    function tab1(){
        $('#tabp1').show();
        $('#tabp2').hide();
        $('#tabp3').hide();
        $('#tab1').addClass("activeTab"); // add class activeTab to show active
        $('#tab2').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab3').removeClass("activeTab"); // remove the class from the pre selected ones
    }
    function tab2(){
        $('#tabp2').show();
        $('#tabp1').hide();
        $('#tabp3').hide();
        $('#tab1').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab2').addClass("activeTab"); // add class activeTab to show active
        $('#tab3').removeClass("activeTab"); // remove the class from the pre selected ones
    }
    function tab3(){
        $('#tabp1').hide();
        $('#tabp3').show();
        $('#tabp2').hide();
        $('#tab1').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab2').removeClass("activeTab"); // remove the class from the pre selected ones
        $('#tab3').addClass("activeTab"); // add class activeTab to show active
    }

</script>

和 HTML

<div id="table-tabs">
                <ul>
                    <li id="tab1" class="tab"><a onClick="tab1();">Accommodation</a></li>
                    <li id="tab2" class="tab"><a onClick="tab2();">Special Offers</a></li>
                    <li id="tab3" class="tab"><a onClick="tab3();">Photo Gallery</a></li>
                </ul>
                <div id="tabp1">Tab 1:  nulla facilisi. Nam liber tempor cum soluta 
                    nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus</div>

                <div id="tabp2">Tab 2 content</div>

                <div id="tabp3">This one here is tab 3, full of Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
                    erat volutpat. Ut wisi enim ad minim veniam, 
                    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
            </div>
        </div><!-- end table tabs -->

最后，CSS:

  #content-left #mainLeftContent #table-tabs ul li.oldTab{
    /* sets background and text color */
}

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}

#content-left #mainLeftContent #table-tabs ul li.activeTab{
    background-color: #015f01;
}
#content-left #mainLeftContent #table-tabs ul li.tab a{
    color: black;
}

#content-left #mainLeftContent #table-tabs ul li.tab{
    padding: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}

我不仅需要 javascript 来选择:

#content-left #mainLeftContent #table-tabs ul li.activeTab 

还有:

#content-left #mainLeftContent #table-tabs ul li.activeTab a

这应该是可能的，有什么想法吗？

只是为了澄清这里的问题:

javascript 正确地应用了 activeTab 类，但是我需要上面的文本是白色的，所以当我选择一个(在事件选项卡之后)并将颜色更改为白色时，它不会应用它。

有趣的变化，我在 anchor 属性上更改了我的文本文本大小并且它改变了大小，所以我认为它是颜色的问题

Answer 1

这两个选择器同样精确，这意味着将使用最后声明的一个

#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}

#content-left #mainLeftContent #table-tabs ul li.tab a{
    color: black;
}

您可以通过使用默认颜色来修复它，该颜色在激活时会被覆盖

/* white when active (now more precise because of li.activeTab */
#content-left #mainLeftContent #table-tabs ul li.activeTab a{
    color: white;
}
/* default black */
#content-left #mainLeftContent #table-tabs ul li a{
    color: black;
}