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 に答える