<!DOCTYPE html>
<html lang="ch-zn">
<head>
<meta charset="UTF-8">
<title>moban</title>
<style>
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
#wrap{
600px;
margin: 50px auto;
user-select: none;
}
#wrap h3{
font-size: 14px;
line-height: 30px;
border-bottom: 1px dashed #aaa;
}
#wrap ul li{
float: left;
list-style: none;
margin-right: 20px;
background: url("./img/ckbg1.jpg") no-repeat left center;
text-indent: 25px;
font-size: 12px;
line-height: 30px;
cursor: pointer;
}
#wrap ul li.on{
background-image: url("./img/ckbg2.jpg");
}
</style>
</head>
<body>
<div id="wrap">
<h3>你喜欢的水果</h3>
<ul>
<li>上衣</li>
<li>裤子</li>
<li>鞋子</li>
<li>袜子</li>
<li>内衣</li>
</ul>
</div>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
/* 选项卡 */
(function () {
//获取标签li的权限
let aoption = document.querySelectorAll("#wrap ul li"),
//定义标签的length值,方便循环用
alen = aoption.length
//定义循环
for (let i = 0; i <alen; i++) {
//给节点标签定义一个初始状态
aoption[i].ifchange = false
//每个li标签点击事件函数
aoption[i].onclick = function(){
//判断li是否是初始状态,是就是false,不是就true
if ( this.ifchange ) {
this.classList.remove("on");
this.ifchange = false;
}else{
this.classList.add("on");
this.ifchange = true;
}
};
};
/* console.log( aoption ); */
/* for (let i = 0; i <alen; i++) {
aoption[i].onclick = function(){
//class,有就去除名字,没有就添加名字,独有
this.classList.toggle("on");
};
}; */
})();
</script>
</body>
<!--
笔记区域
-->
</html>
