js点击变色,在点击还原

那年仲夏 提交于 2020-04-03 07:14:31

 

 

 方法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>
 
效果图:

 

 
 
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!