超简单点击li背景变色 |
您所在的位置：网站首页 › html链接鼠标经过变色 › 超简单点击li背景变色 |
超简单点击li背景变色
|
*{margin: 0;padding: 0;}
div{
min-height: 700px;
}
.main{
width: 80%;
height: auto;
min-height: 700px;
margin: 0 auto;
}
.left,.right{
border: 1px solid #bbbbbb;
}
.left{
width: 15%;
height: auto;
float: left;
}
.right{
width: 80%;
height: auto;
float: right;
}
ul{
list-style: none;
line-height: 50px;
}
.left ul li{
border-bottom: 1px solid #bbbbbb;
padding-left: 50px;
}
.right ul{
padding: 10px 40px;
}
.right ul li{
border-bottom: 1px dashed #bfbfbf;
}
.active{
background-color: #00a0e9;
color: #fff;
}
.right ul li span{
float: right;
padding-right: 10px;
}
政策动态
协会动态
访谈报告
能源会议
关于印发《政策性质的通知》2018-08-23
关于印发《政策性质的通知》2018-08-23
关于印发《政策性质的通知》2018-08-23
关于印发《政策性质的通知》2018-08-23
关于印发《政策性质的通知》2018-08-23
关于印发《政策性质的通知》2018-08-23
关于印发《政策性质的通知》2018-08-23
关于印发《政策性质的通知》2018-08-23
$(".left ul").on("click","li",function(){
$(".left ul li").removeClass("active");
$(this).addClass("active");
});
实现原理就是点击修改li的class属性，所以需要一个class（active）样式 第一步：写一个ul 第二步：添加js 第三步：添加样式 第四步：效果图 其他的样式自己加就可以，点击就可变色，是不是特别简单 |
【本文地址】
今日新闻 |
推荐新闻 |