您的位置：首页 > 其它

选项卡实现Tab

2017-05-10 16:45 330 查看

简单实现选项卡，两种方式实现，一种是最笨的办法，不适用（批注的就是最笨的办法）

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航