更改選項卡式內容部分中選定選項卡的外觀

Question

即時創建網站作爲大學項目。 我添加了一個帶有標籤內容的部分。目前它的運行狀況良好，但是，我希望能夠更改CSS代碼，以便選定的選項卡可以顯示爲與選定的選項卡不同。目前，唯一的區別在於，使標籤中的文字更加大膽。我不能讓標籤背景改變顏色等。我會附上相應的代碼本節 -

HTML

<div class="tabs"> 
    <a href="#" class="defaulttab" rel="tabs1">Peace One Day</a> 
    <a href="#" rel="tabs2">Time Line</a> 
    <a href="#" rel="tabs3">Supporters</a> 
    <a href="#" rel="tabs4">Video</a> 
</div> 

<div class="tab-content" id="tabs1"> 

    <img class="logo" src="images/peace_one_day_logo.png" height="225" width="150"/> 

    <div class="caption_1"> 

     <p>It all started Jeremy Gilley, a British filmmaker, and his decision to share his concerns of Peace with the world. Jeremy started documenting his journey in 1999, when he founded <strong>Peace One Day</strong>, a non-profit organization with the ultimate purpose of establishing an annual day of ceasefire and non-violence. </p> 


       <p>Although the United Nations had already declared the 3rd Tuesday of September as the International Day of Peace, <strong>Peace One Day</strong> campaigned to take it a step further. The aim was to add more practical meaning to the already existing symbolism of the day, and these efforts were rewarded in 2001 when the member states of the United Nations unanimously adopted 21 September as the first annual day of global ceasefire and non-violence. 
     </p> 

    </div>    

</div> 

CSS -

#tab_wrap { 
    width:100%; 
    color:#000; 
    margin-top:3%; 
} 

.tabs a { 
    display:block; 
    float:left; 
    font-size: 20px; 
    color:#fff; 
    text-decoration:none; 
    margin-right:0.5%; 
    padding:1% 2%; 

    background: rgb(23,16,84); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(23,16,84,1) 0%, rgba(41,88,216,1) 2%, rgba(17,0,86,1) 99%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,16,84,1)), color-stop(2%,rgba(41,88,216,1)), 
       color-stop(99%,rgba(17,0,86,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(23,16,84,1) 0%,rgba(41,88,216,1) 2%,rgba(17,0,86,1) 99%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(23,16,84,1) 0%,rgba(41,88,216,1) 2%,rgba(17,0,86,1) 99%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(23,16,84,1) 0%,rgba(41,88,216,1) 2%,rgba(17,0,86,1) 99%); /* IE10+ */ 
    background: linear-gradient(top, rgba(23,16,84,1) 0%,rgba(41,88,216,1) 2%,rgba(17,0,86,1) 99%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#171054', endColorstr='#110056',GradientType=0); /* IE6-9 */  

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

.selected { 
    font-weight: bolder; 
} 

.tab-content { 
    clear:both; 
    border:solid #006 medium; 
    padding:3%; 
    background-color:#FFF; 

    -webkit-border-radius: 25px; 
    -webkit-border-top-left-radius: 5px; 
    -moz-border-radius: 25px; 
    -moz-border-radius-topleft: 5px; 
    border-radius: 25px; 
    border-top-left-radius: 5px; 
} 

#tabs1 { 
    height:420px; 
} 

#tabs2 { 
    height:800px; 
} 

.logo { 
    margin-top:10%; 
} 

.caption_1 { 
    width:75%; 
    float:right; 
} 

的JavaScript -

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('.tabs a').click(function(){ 
      switch_tabs($(this)); 
     }); 

     switch_tabs($('.defaulttab')); 

    }); 

    function switch_tabs(obj) 
    { 
     $('.tab-content').hide(); 
     $('.tabs a').removeClass("selected"); 
     var id = obj.attr("rel"); 

     $('#'+id).show(); 
     obj.addClass("selected"); 
    } 

Answer 1

對於初學者改變：

.selected { 
    font-weight: bolder; 
} 

到：

.tabs a.selected { 
    font-weight: bolder; 
} 

這樣，你可以重寫tab a選擇樣式。

你可以正是如此清理你的jQuery：

function switch_tabs(obj) 
{ 
    $('.tab-content').hide().filter(obj.attr("rel")).show(); 
    obj.addClass("selected").siblings().removeClass("selected"); 
}