Изменение фона выбранного 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> Tag что я нажал ...

Но вы пытаетесь изменить шрифт color, а не background-color. Поэтому я предполагаю, что у <a> уже есть цвет, который переопределяет значение <li>.
Попробуйте с background-color и убедитесь, что <a> не переопределяет этот стиль.

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

EDIT: Как sngregory сказал, вы, вероятно, хотите, чтобы перехватить и отменить поведение по умолчанию <a>. Таким образом, вы можете переписать код так:

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

Answer 2

Почему бы не использовать .toggle()

Я создал быстрый jsFiddle here.

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