1

如果有人能为这个问题想出一个更好的标题，请随时更改它。这就是问题所在：在导航菜单中，单击某个项目应将其标记为红色（默认为橙色）。橙色和红色样式（分别是类名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小提琴

4

3 回答 3

1

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

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

jsFiddle在这里。

于 2013-06-01T15:12:57.820 回答
1

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

你可以这样做 ：

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

示范

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

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

它还可以让 CSS 更清晰，因为您的两个类目前基本相同，最好在“活动”类中隔离两种模式之间的少量更改。

于 2013-06-01T15:14:03.390 回答
1

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

$(function () {

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

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

于 2013-06-01T15:14:57.883 回答