编写jquery下拉列表和css更改的更好方法

我正在学习jquery的东西，我正在试图找到一种更好的方法来编写我创建的代码。它目前“有效”，但我使用的是一个.css字符串，随着我变得越来越复杂，它实际上没有什么功能。这是一把功能正常的小提琴：

代码如下：

HTML

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 */
}

---

我确信我必须使用“this”语句，但我还没有完全弄明白。我不知道如何真正使用.addClass，如果这是正确的方法的话。此外，它在小提琴中的方式，就像在页面加载时已经选择了第一个选项一样。谢谢你的帮助

看起来就像您创建了自己的选项卡，还使用了jQuery，为什么不使用

或者您可以使用

$('#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');

});

看

然后，您可以进一步执行此操作，以便单击函数加载所单击的href的ID。然后使用匹配的类对DIV进行自动本地

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

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

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

---

看

太棒了，让我看看这两个！感谢链接到标签功能，我不知道它的存在！这正是我想要的。

$('#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');

});

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

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

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