Question

我一直在尝试创建一个菜单，在用户点击菜单项后，该项将被设置为活动状态，并且将取消选择上一个活动项。但是，我不太确定我做错了什么：http://jsfiddle.net/Z5M2a/15/

编辑：转换id和class，但仍然不确定是什么问题 Javascript：

$(document).ready(function(){
    $('#menuOption').mousedown(function() {
          $('#menuOption').attr('class', '');
          $(this).attr('class', 'active');

    });
 });

HTML：

<div id="side-bar"> 
                <ul class="side-nav">
                  <li class="divider"></li>
                  <li id="menuOption" class="active"><a href="#">Link 1</a></li>
                  <li class="divider"></li>
                  <li id="menuOption"><a href="#">Link 2</a></li>
                  <li class="divider"></li>
                  <li id="menuOption"><a href="#">Link 3</a></li>
                  <li class="divider"></li>
                  <li id="menuOption"><a href="#">Link 4</a></li>
                  <li class="divider"></li>
                </ul>   
           </div>

任何帮助将不胜感激，谢谢！

Answer 1

元素ID通常应该是静态的。请尝试更改课程。

另外，将mouseOption更改为.menuOption。这是一个工作小提琴：

http://jsfiddle.net/ByXJc/

$(document).ready(function(){
    $('.menuOption').mousedown(function() {
        $('.menuOption').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 2

将$('mouseOption')更改为$('.menuOption')

除此之外，您应该永远不要将list元素用作divider（而是使用CSS）

Answer 3

您没有正确引用该元素，您应该添加classes而不是更改id

FIDDLE

您也可以使用click来代替mousedown

$(document).ready(function(){
    $('.menuOption').click(function() {
        $('.menuOption').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 4

最好为此使用额外的类，因为id的目的是为元素赋予唯一的标识，而不是“状态”。

$(document).ready(function () {
    $('.mouseOption').mousedown(function () {
        $('.mouseOption').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 5

$（'mouseOption'）不存在！

$(".menuOption")

表示“选择类menuOption的那些元素”（点表示“类”）

使用jQuery设置id

5 个答案: