Изменить фон выбранного LI с помощью JQuery

Question

Я хочу изменить цвет фона тега LI, на который я нажал ....
Но проблема в том, что код (как JQuery, так и список LI) находится на главной странице (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 здесь .

С некоторыми условными выражениями вы можете сделатьтворческий материал с этого момента.Надеюсь, это поможет.