更改选项卡式内容部分中选定选项卡的外观

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