При изменении цвета фона нажмите

Question

Я создал навигацию, и я хочу, чтобы каждая категория, которую пользователь нажимает, получает CSS-кнопку, связанную с ней.

Вот ссылка скрипку: http://jsfiddle.net/xn2hk/14/

CSS

#nav { 
    width: 960px; 
    height: 35px; 
    margin: 0 auto; 
    border: 1px solid #fefcea; 
    background: #4c4c4c; 
} 
#nav ul { 
    width: 100%; 
    margin: 0 auto; 
} 
#nav li { 
    display: inline; 
    text-decoration: none; 
    color: #eee; 
    line-height: 35px; 
    padding-left: 80px; 
    padding-right: 80px; 
} 
#main { 
    width: 500px; 
    height:500px; 
    margin: 0 auto; 
    background-color: black; 
} 

HTML

<div id="nav"> 
    <ul> 
     <li>Day</li> 
     <li>Night</li> 
     <li>Nature 1</li> 
     <li>Nature 2</li> 
    </ul> 
</div> 
<div id="main"></div> 

Answer 1

использовать что-то вроде этого, это будет влиять только на текущий щелкнул один

$('#nav ul li').click(function(){ 
    $('li').removeClass('bc'); 
    $(this).addClass('bc'); 
}); 

рабочая вилка here

Answer 2

Вы должны сначала добавить js как «jquery 1.10.1», а также добавить html один атрибут под ли.

Вот HTML код:

<div id="nav"> 
      <ul> 
       <li data-color="red">Day</li> 
       <li data-color="gray">Night</li> 
       <li data-color="yellow">Nature 1</li> 
       <li data-color="blue">Nature 2</li> 

      </ul>   
     </div> 
    <div id="main"></div> 

Здесь JS код:

$('#nav li').click(function(){ 
    var color = $(this).attr('data-color'); 
    $(this).css("background-color", color); 
});