使用jQuery添加类，但要确保它使用类之后的所有标记

我不知道如何在标题中使用这个词，但假设你有这样的东西：

    <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，但是我需要上面的文本是白色的，所以当我选择一个（在活动选项卡之后）并将颜色更改为白色时，它不会应用它。

有趣的变化是，我改变了锚属性上的文本大小，它也改变了大小，所以我认为这是颜色的问题