Меню подсветки jQuery

Question

У меня есть этот скрипт, который выделяет навигационное меню при нажатии, но после щелчка выбранного класса исчезает. Есть ли способ обхода, чтобы сделать выбранный класс действующим после щелчка?

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#nav ul li a').click(function() { 
     $('#nav ul li').removeClass('selected'); 
     $(this).parent('li').addClass('selected'); 
     alert('hello'); 
    }); 
}); 

</script> 
    <div id="nav"> 
     <ul>  
      <li><a href="/">Home</a></li> 
      <li><a href="/blog/">Blog</a></li> 
      <li><a href="/about/">About</a></li> 
     </ul> 
    </div> 

Answer 1

Если я вас правильно понял ... Пример: http://jsfiddle.net/jgmgW/

$(document).ready(function() { 
    $('#nav ul li').click(function() { 
     $('#nav ul').children('li').removeClass(); 
     $(this).addClass('selected'); 
    }); 
}); 

#nav .selected a{background:red;display:block} 

<div id="nav"> 
    <ul>  
     <li><a href="#">Home</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
</div> 

Answer 2

Вы можете использовать метод .siblings получить li элементы, которые имеют selected класс.

$(document).ready(function() { 
    $("#nav ul li a").click(function() { 
     $(this).parent("li") 
      .addClass("selected") 
      .siblings(".selected") 
       .removeClass("selected"); 
     return false; 
    }); 
}); 

Вы можете увидеть это в действии на jsFiddle.