js点击变色，在点击还原

 

 

 方法1：

 

html：

<li class="active twonav">

<label

class="jpg rgb"

href="#Navsola"

role="tab"

data-toggle="pill"

>单张</label

>

</li>

<li class="twonav">

<label

class="sole rgb"

href="#Navshrine"

role="tab"

data-toggle="pill"

>图库</label

>

</li>

 

 

 

 

css

.jpg {

color: #ffffff;

float: left;

width: 36px;

height: 21px;

border: 1px solid #656565;

font-size: 12px;

padding: 2px 5px;

background-color: #656565;

border-radius: 4px;

}

.sole {

color: #4d4d4d;

width: 36px;

height: 21px;

border: 1px solid #656565;

float: left;

font-size: 12px;

padding: 2px 5px;

background-color: #ffffff;

border-radius: 4px;

}

 

 

 

 

js

 

$(function() {

//单张和图库的按钮切换变色点击事件

$(".rgb").click(function() {

if ($(this).css("background-color") == "rgb(255, 255, 255)") {

$(".rgb").css("background-color", "#FFFFFF");

$(this).css("background-color", "#4d4d4d");

$(".rgb").css("color", "#4d4d4d");

$(this).css("color", "#ffffff");

} else if ($(this).css("background-color") == "rgb(77, 77, 77)") {

$(".rgb").css("background-color", "#4d4d4d");

$(this).css("background-color", "#FFFFFF");

$(".rgb").css("color", "#FFFFFF");

$(this).css("color", "#4d4d4d");

}

});

});

 

 

 

效果图

 

 

方法2：

html：

<div class="aaa">

<div class="bbb">

aaaaaa

</div>

<div class="bbb">

bbbbbb

</div>

<div class="bbb">

bbbbbb

</div>

<div class="bbb">

bbbbbb

</div>

<!-- <div style="clear: both;"></div> -->

</div>

 

 

js

<script type="text/javascript">

$(function() {

$(".bbb").click(function() {

var num = $(".aaa .bbb").index(this);

alert(num);

$(".aaa .bbb")

.eq(num)

.css("background-color", "red")

.siblings(".aaa .bbb")

.css("background-color", "blue");

});

});

</script>

 

效果图：

 

 

 

来源：https://www.cnblogs.com/lovebear123/p/11359201.html