Question

im creating a web site as a university project.
I have added a section with tabbed content. Its working well at the moment, however, i want to be able to change the CSS code so that the selected tab can appear different to the none selected tabs. Currently, the only difference which works, is to make the text in the tab’s bolder. I cant get the tabs backgrounds to change colour etc. I will attach appropriate code for this section –

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

For starters change:

.selected {
    font-weight: bolder;
}

to:

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

That way you can override the tab a selector styles.

And you can clean up your jQuery thusly:

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