使用 JQuery 更改所选 LI 的背景

Question

我想更改我点击的 LI Tag 的背景颜色....
但问题是，代码（JQuery 和 LI 列表）在 masterpage(Admin.master) 上， 我在 Admin.Master 页面上编写了以下代码...但它似乎不起作用.....

    <div id="main_menu">
            <ul>
                <li><a href="dashboard.aspx">Dashboard</a> </li>
                <li><a href="Contacts.aspx">Contacts</a></li>
                <li><a href="MeetingA.aspx">Schedule Meeting</a></li>
                <li><a href="Tasks.aspx">Task</a></li>
                <li><a href="Calendar.aspx">Calendar</a></li>
                <li><a href="Documents.aspx">Documents</a></li>                    
            </ul>
        </div>

我的 JQuery 代码是：

 $(document).ready(function(){
            $("li").click(function(){
               $('li').removeClass('selected');
               $(this).addClass('selected');
              });
            });

风格：

  <style type="text/css">
    li { color: #000; } li.selected { color: #FF0000; } 
  </style> 

所有代码都在 MasterPage 上，但没有得到解决方案..

谢谢， 维沙尔

Answer 1

为什么不使用.toggle()

我已经快速创建了jsFiddle here。

从现在开始，您可以使用一些条件语句来做一些创造性的事情。 希望对您有所帮助。

Answer 2

我想改变我点击的<li>标签的背景颜色...

但您尝试更改字体color，而不是background-color。所以我的猜测是<a> 已经定义了一种颜色，它会覆盖<li> 的颜色。
尝试使用 background-color 并检查 <a> 是否没有覆盖该样式。

li.selected { background-color: #FF0000; }

编辑：就像 sngregory 所说，您可能想要拦截并取消 <a> 的默认行为。所以你可以像这样重写你的代码：

$('a').click(function(e){
    e.preventDefault();
    $('li').removeClass('selected');
    $(this).parent().addClass('selected');
});