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")：

<强> Demo

旁注：如果您使用的是jQuery UI，您还可以考虑checkbox buttons

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");
  });
});

根据用户界面，您想要的是错误的。

参考 LIVE DEMO

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');
        }
    });
});

不要在点击时删除课程

5 个答案: