jquery - 使用 jQuery 设置 id

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。这是一个工作 fiddle :

http://jsfiddle.net/ByXJc/

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