选择（选中与不选）
代码：
index.htnl
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选则</title>
<style>
ul,li{
margin:0;
padding:0;
list-style: none;/*去掉li的换行样式*/
}
ul{/* 边框，位置居中*/
width:560px;
border:3px solid #eee;
margin:0 auto;
}
li{
width:80px;
height:40px;
background: #ccc;
border:1px solid #abc;
float:left;
margin:5px;
cursor:pointer;
}
div{
width:280px;
height:90px;
border:1px solid #ccc;
margin: 0 auto;
text-align: center;
line-height: 90px;
color:#333;
}
.licheck{
font-size:16px;
text-align:center;
line-height: 40px;
font-family: '仿宋';
font-weight: bold;
color:#333;
background: orange;
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
<p style="clear: both;"></p>
<div class="dtwo" >屏幕中央</div>
</ul>
<script type="text/javascript">
// 逻辑：没有check类的时候，进行添加，同时对文本进行赋值；
//反之，有check类的时候，清空check类，同时 文本值为空
let lis = document.getElementsByTagName('li');
//方法一：
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function(){
console.log("这里");
let liRes = this.getAttribute('class');//取此时标签中的class类
if (!liRes) {
this.setAttribute('class','licheck');
this.innerText = '座位已选!';
}else{
this.setAttribute('class','');
this.innerText = '';
}
}
}
//方法二：直接在循环里面改变样式，但是的加一个标志，
//判断是否有此标志，有，则添加一种样式（座位已选）；没有，另一种样式（没有被选）
</script>
</body>
</html>
效果：
结束！！！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
