Question

我制作了一个简单的脚本，告诉你使用jQuery删除类和添加类选择了什么，但似乎编码过多。

这是代码：

$(".panel_nav li.kset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });
    $(".panel_nav li.gset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });

    $(".panel_nav li.rset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });
    $(".panel_nav li.dset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });

有没有办法将其剥离？

谢谢

Answer 1

您可以将removeClass行更改为 -

$('*:not(this)').removeClass('selected');

演示 - http://jsfiddle.net/zzxp8/

修改

我认为你可以把整个事情归结为这个 -

$("li").click(function(){ $('li').removeClass('selected'); $(this).addClass('selected'); });

http://jsfiddle.net/zzxp8/2/

Answer 2

您不应该在ul及其li元素之间建立链接：

<ul id="panel_nav" class="panel_nav">
    <li class="gset selected"><a href="#generalsettings">General Settings</a></li>
    <li class="kset"><a href="#keyboardshortcuts">Keyboard Shortcuts</a></li>
    <li class='rset'><a href="#regionalsettings">Regional Settings</a></li>
    <li class="dset"><a href="#resetdefaults">Reset to Defaults</a></li>
</ul>

在li中移动锚点需要更改CSS：

.selected a {color:red}

javascript非常重复，可以简化为：

$("#panel_nav li").click(function() {
    $(this).addClass('selected').siblings(".selected").removeClass('selected');
});

JSFiddle：http://jsfiddle.net/Wz7Dv/1/

Answer 3

$('#panel_nav a').click(function(){
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
});

这是fiddle

Answer 4

因为看起来你为每个列表项做了同样的事情，这将做我认为你想要完成的事情：

$(".panel_nav li.kset,.panel_nav li.gset,.panel_nav li.rset,.panel_nav li.dset").click(function(){
        $('.panel_nav li.kset.selected,.panel_nav li.gset.selected,.panel_nav li.rset.selected,.panel_nav li.dset.selected').removeClass('selected');
        $(this).addClass('selected');
    });

修改

实际上，为您想要选择的项目添加不同的类可能是最干净的。请参阅此示例：http://jsfiddle.net/otisskavier/Wz7Dv/3/。

简化jQuery addClass和removeClass以显示所选内容

4 个答案: