小灯泡实例
- 1 css部分
/* 清除内置margin padding */
* {
margin: 0;
padding: 0;
}
ul{
overflow: hidden;
/* 因为li浮动会造成ul的高度塌陷防止ul高度塌陷 */
}
ul li {
list-style: none;
float: left;/*让li并排显示*/
width: 100px;
height: 100px;
background-color: #009966;
border-radius: 50%;/*让li的变成圆形*/
border: 50px solid lightpink;/*给他加border样式让其成环状*/
}
/*为其设置点击后样式on*/
.on{
background-color: gold;
border: 50px solid papayawhip;
}
- 2 html部分
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
- 3 js部分
// 获取html元素
var lis = document.getElementsByTagName('li')
// 使用for循环遍历出每一个li
for (let i = 0; i < lis.length; i++) {
// 添加点击事件
lis[i].onclick = function () {
// 一刀切 遍历出每一个li去掉每一个li的点击样式
for (let j = 0; j < lis.length; j++) {
lis[j].className = "";
}
然后为点击的圆环添加样式
this.className = "on"
}
}
- 4 成品如图