!!目标效果
点击能自由切换,前面的小图标用伪类来做。
1.先看HTML结构
<div class="m-check">
<i class="active">今日</i>
<i>本周</i>
<i>本月</i>
<i>本季度</i>
<i>本年</i>
</div>
我们并没有给小图给标签和留位置;
2.css样式
.m-check i::before {
content: '';
background: url(../images/index/y2.png) no-repeat;
background-size: 100% 100%;
height: 20px;
width: 20px;
float: left;
margin-right: 10px;
}
找到i标签,加上::before,给::before写样式,注意:contain:''必须有,再给个宽高,就出现在了i的前面,再调调样式就ok啦
附上整体代码:(拿走不谢,好用记得点赞哦)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.m-check {
margin-left: 15px;
top: 20px;
z-index: 5;
position: relative;
width: 100%;
}
.m-check i {
color: #000;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
float: left;
margin-right: 10px;
}
.m-check i::before {
content: '';
background: url(../images/index/y2.png) no-repeat;
background-size: 100% 100%;
height: 20px;
width: 20px;
float: left;
margin-right: 10px;
}
.m-check i.active {
color: #FFEB0F;
}
.m-check i.active::before {
background: url(../images/index/y2-1.png) no-repeat;
background-size: 100% 100%;
}
</style>
<body>
<div class="m-check">
<i class="active">今日</i>
<i>本周</i>
<i>本月</i>
<i>本季度</i>
<i>本年</i>
</div>
</body>
<script src="resource/jquery/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script>
$('.m-check i').click(function () {
$(this).addClass('active').siblings().removeClass('active');
})
</script>
</html>