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

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

1 个答案: