更好的方式來寫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; 
} 

JQUERY

$('#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 */ 
} 

，但我還沒有完全明白這些了。我不確定如何真正使用.addClass，如果這是正確的方式。另外它在小提琴中的方式就好像第一個選項已經在頁面加載時被選中一樣。謝謝您的幫助！

Answer 1

看起來你創建自己的選項卡，並使用jQuery，爲什麼不使用http://jqueryui.com/tabs/

或者你可以通過使用

$('#basics').click(function(){ 
    $('div').css('display','none'); 
    $('.basics').css('display','block'); 

}); 

$('#advanced').click(function(){ 
    $('div').css('display','none'); 
    $('.advanced').css('display','block'); 


}); 

$('#combos').click(function(){ 
    $('div').css('display','none'); 
    $('.combos').css('display','block'); 

}); 

略有simplfy見http://jsfiddle.net/uuYa3/2/

然後，您可以藉此進一步所以點擊功能會加載點擊的href的ID。然後自動本地DIV與匹配的類。

$('a li').click(function(){ 

    var myId = $(this).attr('id'); 

    $('div').css('display','none'); 
    $('.' + myId).css('display','block'); 
}); 

見http://jsfiddle.net/uuYa3/3/