js、jq、点击改变字体颜色背景色

最新推荐文章于 2024-07-21 02:48:57 发布

置顶林中明月间。

最新推荐文章于 2024-07-21 02:48:57 发布

阅读量8.8k

点赞数

分类专栏： JQuery JavaScript

本文链接：https://blog.csdn.net/a772116804/article/details/79412146

版权

JavaScript 同时被 2 个专栏收录

120 篇文章 9 订阅

订阅专栏

JQuery

61 篇文章 5 订阅

订阅专栏

css:

.zhuantai{width: 90%;height: 70px;border-top: 1px solid #bdbcbc; border-bottom: 1px solid #bdbcbc; margin: 10px auto;}

.yinye{display: inline-block;height: 70px;width: 30%;float: left;color: #ff4949; font-size: 25px;line-height: 70px;text-align: center;}

.xiuxi{display: inline-block;height: 70px;width: 30%;float: right;font-size: 25px;line-height: 70px;text-align: center;}

html:

js:

window.οnlοad=function(){
var lis=document.getElementById("zt").getElementsByTagName("span");
for(var i=0;i<lis.length;i++){
lis[i].setAttribute("index",i);
lis[i].οnclick=function(){
for(var i=0;i<lis.length;i++){
if(this.getAttribute("index")==i){
lis[i].style.color="#ff4949";
lis[i].style.background="black";
}else{
lis[i].style.color="#060606";
lis[i].style.background="green";
}
}
}
}
}
</script>

<style>
ul li{
	list-style: none;
}
li{
	width: 60px;
	height: 30px;
	color: #000;
	background: #fff;
}
.on{
	background: red;
	color: #fff;
}
</style>
</head>
<body>
	<div id="show_quan">  
    <ul>  
    <li class="on">1</li>  
    <li>2</li>  
    <li>3</li>  
    </ul>  
</div> 
<script type="text/javascript">  
    $('#show_quan li').each(function(i,v){//遍历加                          
        $(v).click(function(){   
            $(this).addClass('on').siblings().removeClass('on'); 
            });  
       });  
</script>   
</body>