Javascript 单击“更改背景色”

我已经创建了一个导航，我希望每个类别的用户将点击得到相关按钮的CSS

这里是小提琴链接：

CSS

HTML

一天
夜
性质1
性质2

使用类似的方法，这只会影响当前单击的内容

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

---

工作fiddle

您必须首先添加js，如“jquery1.10.1”，并在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>

---

@NiettheDarkAbsol有一点我不知道如何选择li文本，所以我真的不知道如何开始，但我将把它作为一个练习留给您尝试和理解；）@alonblack-你的小提琴中也缺少jQuery…用$（'#nav ul li'）回答。单击（function（）{应该是OK的，我不明白为什么这里需要JS。使用（设置单击链接的样式）或（在一页内设置链接目标的样式）CSS伪类。@feeela像这样？nth xhild（1）：target{background color:blue；}但是如果我想在背景中添加pic怎么办？请查看html中的此链接您必须添加正确的图像路径“

day

”。您必须将路径添加到“images/day.png”的位置。我想将前两个链接中的两个组合为颜色，后两个为图像hanks！1）我想更改图像的颜色“main”div 2）如果我想将其更改为图片而不是颜色，该怎么办？您可以使用背景图像来执行此操作，对于main div背景颜色，请检查此更新的小提琴如何针对每个不同的li“昼”“夜”“…到另一个背景？我尝试了第三次点击，你能看看为什么它不起作用吗？你给了‘nature1’而不是‘nature1’”

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

  <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>

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