单击更改背景颜色

On click change background color

本文关键字：颜色 背景 单击      更新时间：2023-09-26

我创建了一个导航，我希望用户单击的每个类别都可以获取与之相关的按钮的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>

使用这样的东西，这只会影响当前点击的

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

在这里工作小提琴

你必须首先添加像"jquery 1.10.1"这样的js，并在html中添加li下的一个属性。

这是 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 );
});
相关文章：