javascript - 不要在点击时删除课程

Question

我有以下 jQuery 代码，它补充了 CSS 创建的导航栏。active目前，当按下单独的导航按钮时，代码会删除该类。

我希望代码不删除active该类并允许一次激活多个按钮。如何实现？

$(function(){
  $(".uibutton").click(function(e){
    e.preventDefault();
    $(".uibutton").addClass("active").not(this).removeClass("active");
  });
});​

jsFiddle 上的完整代码：http: //jsfiddle.net/KhyK7/

Answer 1

您可以将该toggleClass功能与删除一起使用removeClass("active")：

演示

旁注：如果您使用的是 jQuery UI，您还可以考虑复选框按钮

Answer 2

你可以像这样修改你的代码

$(function(){
  $(".uibutton").click(function(e){
    e.preventDefault();
    var button = $(this);

    button.toggleClass("active");
  });
});

Answer 3

这样做： -

$(function(){
  $(".uibutton").click(function(e){
    $(this).addClass("active");
  });
});​

根据 UI，您想要的是错误的。

参考现场演示

Answer 4

您可以定位单击的事件项并添加类，简单...

$(function(){
  $(".uibutton").click(function(e){
    e.preventDefault();
    $(e.target).addClass("active");
  });
});​

Answer 5

$(function(){
    $(".uibutton").click(function(e){
        e.preventDefault();
        if ($(this).hasClass('active')) {
            $(this).removeClass("active");
        } else {
            $(this).addClass('active');
        }
    });
});​