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

我想更改已点击的<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');
});

Answer 2

为什么不使用.toggle()

我已快速创建jsFiddle here。

通过一些条件语句，您可以从这一点开始做一些有创意的事情。希望有所帮助。

使用JQuery更改所选LI的背景

2 个答案: