1

我一直在尝试创建一个菜单，在用户单击菜单项后，该菜单项将被设置为活动状态，并且先前的活动项将被取消选择。但是，我不太确定我做错了什么：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>

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

4

5 回答 5

4

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

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

http://jsfiddle.net/ByXJc/

$(document).ready(function(){
    $('.menuOption').mousedown(function() {
        $('.menuOption').removeClass('active');
        $(this).addClass('active');
    });
});
于 2013-08-05T20:05:45.497 回答
1

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

小提琴

你也可以使用click调用而不是mousedown

$(document).ready(function(){
    $('.menuOption').click(function() {
        $('.menuOption').removeClass('active');
        $(this).addClass('active');
    });
});
于 2013-08-05T20:08:00.600 回答
1

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

除此之外，您不应该使用列表元素作为分隔符（改用 CSS）

于 2013-08-05T20:04:33.273 回答
0

最好为此使用一个额外的类，因为ids 的目的是为元素提供唯一标识，而不是“状态”。

$(document).ready(function () {
    $('.mouseOption').mousedown(function () {
        $('.mouseOption').removeClass('active');
        $(this).addClass('active');
    });
});
于 2013-08-05T20:07:36.097 回答
0

$('mouseOption') 不存在！

$(".menuOption")

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

于 2013-08-05T20:09:21.593 回答