javascript - 单击更改背景颜色

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');
});

在这里工作小提琴

Answer 2

您必须首先添加像“jquery 1.10.1”这样的js，并在li下添加一个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 );
});