jquery - jquery ドロップダウンと css 変更を記述するより良い方法

Question

私はjqueryのことを学んでおり、自分が作成したコードを書くためのより良い方法を見つけようとしています. 現在「動​​作」していますが、複雑になるにつれて実際には機能しない .css 文字列を使用しています。ここに機能するフィドルがあります：http://jsfiddle.net/timlcooley/uuYa3/1/

コードは次のとおりです。

HTML

 <ul>
      <a href="#"><li id="basics" class="b1 grey_button" >Basics</li></a>
      <a href="#"><li id="advanced" class="b2 grey_button" >Advanced</li></a>
      <a href="#"><li id="combos" class="b3 grey_button" >Combos</li></a>
 </ul>

 <div class="clear basics">Basic</div>
 <div class="clear advanced">Advanced</div>
 <div class="clear combos">Combos</div>

CSS

li{
    list-style:none;
    float:left;
    margin:10px;
    color:white;
}
.clear{
     clear:both;   
}

#basics{
     background:green;   
}

#advanced{
    background:grey;
}

#combos{
    background:grey;
}

.grey_button{
    background: #adadad;
}

.basics{
     display:block;
}

.advanced{
     display:none;   
}

.combos{
     display:none;   
}

Jクエリ

$('#basics').click(function(){
    $('.basics').css('display','block');
    $('.advanced').css('display','none');
    $('.combos').css('display','none');
    $('#basics').css('background','green');
    $('#advanced').css('background','grey');
    $('#combos').css('background','grey');
});

$('#advanced').click(function(){
    $('.basics').css('display','none');
    $('.advanced').css('display','block');
    $('.combos').css('display','none');
    $('#basics').css('background','grey');
    $('#advanced').css('background','red');
    $('#combos').css('background','grey');

});

$('#combos').click(function(){
    $('.basics').css('display','none');
    $('.advanced').css('display','none');
    $('.combos').css('display','block');
    $('#basics').css('background','grey');
    $('#advanced').css('background','grey');
    $('#combos').css('background','blue');

});

これは、私が使用している形式を機能させない変更する CSS の例です。

#basics{
    background: #60b263; /* Old browsers */
background: -moz-linear-gradient(left, #60b263 0%, #28d662 30%, #28d662 70%, #60b263 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#60b263), color-stop(30%,#28d662), color-stop(70%,#28d662), color-stop(100%,#60b263)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #60b263 0%,#28d662 30%,#28d662 70%,#60b263 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #60b263 0%,#28d662 30%,#28d662 70%,#60b263 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #60b263 0%,#28d662 30%,#28d662 70%,#60b263 100%); /* IE10+ */
background: linear-gradient(to right, #60b263 0%,#28d662 30%,#28d662 70%,#60b263 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60b263', endColorstr='#60b263',GradientType=1 ); /* IE6-9 */
}

「this」ステートメントを使用する必要があると確信していますが、それらを完全には理解していません。それらが正しい方法である場合、.addClassを実際に使用する方法がわかりません。また、最初のオプションがページの読み込み時にすでに選択されているかのように、それがフィドルにある方法です。助けてくれてありがとう！