简单实现选项卡，两种方式实现，一种是最笨的办法，不适用（批注的就是最笨的办法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
padding: 0px;
margin: 0px;
}
ul{
list-style: none;
border: 1px red solid;
overflow: hidden;
}
ul li{
float: left;
padding: 10px 70px 10px 70px ;
border: 1px blue solid ;
}
.tab{
width: 99.8%;
height: 400px;
/*border: 1px red solid;*/
}
.tab-1{
position: absolute;
top: 40px;
left: 0px;
text-align: center;
line-height: 400px;
color: red ;
width: 99.8%;
height: 400px;
border: 1px blue solid;
opacity:0;
}
.tab1-show{
opacity: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li class="choose" name="0">选项一</li>
<li class="choose" name="1">选项二</li>
<li class="choose" name="2">选项三</li>
</ul>
<div class="tab">
<div class="tab-1 tab1-show">1</div>
<div class="tab-1">2</div>
<div class="tab-1">3</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$(function () {
console.log("uuuuuuuu")
$(".choose").click(function () {
var tabList=document.getElementsByClassName("tab-1")
var name= this.getAttribute("name")
for(var i=0;i<tabList.length;i++){
tabList[i].className="tab-1"
}
tabList[name].className="tab-1 tab1-show"
})
});
// var chooseList=document.getElementsByClassName("choose");
// // console.log(chooseList[0]);
// for(var i=0;i<chooseList.length;i++){
// if(i==0){
// chooseList[i].onclick=function (i) {
// var tab=document.getElementsByClassName("tab-1");
// tab[0].style.opacity="1";
// tab[1].style.opacity="0";
// tab[2].style.opacity="0";
// // console.log(tab[0].getAttribute("name"))
// }
// }else if(i==1){
// chooseList[i].onclick=function (i) {
// var tab=document.getElementsByClassName("tab-1");
// tab[0].style.opacity="0";
// tab[1].style.opacity="1";
// tab[2].style.opacity="0";
// // console.log(tab[1].getAttribute("name"));
//
// }
// }else if(i==2){
// chooseList[i].onclick=function (i) {
// var tab=document.getElementsByClassName("tab-1");
// tab[0].style.opacity="0";
// tab[1].style.opacity="0";
// tab[2].style.opacity="1";
// // console.log(tab[2].getAttribute("name"))
// }
// }
// }
</script>
</body>
</html>