添加類的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，但我需要的文本是白色上，所以，當我選擇了（後主動標籤），並改變顏色爲白色它不適用它。

有趣的變化，我改變了我的文字文本大小的錨屬性，它改變了大小，因此即時通訊思想與顏色的問題

Answer 1

因此，假設您選擇了「＃表標籤UL麗一「：

$("#table-tabs ul li a").click(function(e) { 

e.preventDefault(); 

$(this).parent().toggleClass('tab activeTab'); //Remove class tab, add class activeTab 

}); 

Answer 2

你應該改變，只是將顏色很重要，它會解決它

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

支票本的jsfiddle http://jsfiddle.net/ENS8N/

Answer 3

這兩種選擇都同樣精確，這意味着最後宣佈一個將用於

#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; 
} 

Answer 4

它適用於修復我調整你的CSS後，你不必添加所有額外的CSS引用。就這樣保持簡單，它在我身邊完美地工作。

<style type="text/css"> 
li.oldTab{ 
    /* sets background and text color */ 
} 

li.tab a{ 
    color: black; 
} 

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; 
} 
li.activeTab a{ 
    color: white; 
} 

li.activeTab{ 
    background: #999; 
} 
</style>