0

我正在创建一个网站作为大学项目。我添加了一个带有标签内容的部分。它目前运行良好，但是，我希望能够更改 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");
    }

4

1 回答 1

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");
}
于 2012-04-18T17:05:56.073 回答