Question

如果有人能为这个问题想出一个更好的标题，请随时改变它。这是问题：在导航菜单中，单击项目应将其标记为红色（默认为橙色）。橙色和红色样式（分别为bmark和bmark_active）都是使用CSS Button Generator应用程序生成的。这是应该完成这项工作的jQuery代码：

$(function () {
    $('.bmark').click(function(){
        $('.bmark_active').addClass('bmark');
        $('.bmark_active').removeClass('bmark_active');
        $(this).addClass('bmark_active');
        $(this).removeClass('bmark');
    });
})

它适用于所有按钮，除了默认按钮（小提琴示例中的“全部”）。因此，如果单击“俄罗斯”，红色焦点将移动到该按钮（通过删除橙色类并添加红色类），但是当您再次单击“全部”时，它不会切换为红色。为什么这样，我该如何解决？

JS Fiddle

Answer 1

您没有将click()事件应用于父元素，仅将其应用于子元素：

$(function () {
    $('.bmark, .bmark_active').click(function(){
        $('.bmark_active').toggleClass('bmark').removeClass('bmark_active');
        $(this).addClass('bmark_active').removeClass('bmark');
    });
})

<强> jsFiddle here.

Answer 2

你没有绑定'.bmark_active'元素。

你可以这样做：

$(function () {
    $(document).on('click', '.bmark_active,.bmark', function() {
        $('.bmark_active').addClass('bmark').removeClass('bmark_active');
        $(this).removeClass('bmark').addClass('bmark_active');
    });
})

Demonstration

但是大多数情况下我更喜欢为所有元素提供相同的类，并且只在活动元素上添加或删除一个类，以便事件处理代码为

 $('.bmark').removeClass('active');
 $(this).addClass('active');

它也让CSS变得更清晰，因为你的两个类目前大部分是相同的，最好只在“active”类中隔离的两个模式之间进行一些更改。

Answer 3

更新你的小提琴这样做。更简化。这里的其他答案工作正常，但这是处理它的最简单的方法。

$(function () {

    $('.bmark').click(function(){
        $('.bmark').removeClass('active');
        $(this).addClass('active');
   });
})

http://jsfiddle.net/chazelton/52esG/2/

jQuery自定义菜单 - 添加和删除onClick类

3 个答案: