1.结构
<div class="table">
<div class="tab">
<ul id="tab">
<li class="current">账号登录</li>
<li>扫码登录</li>
</ul>
</div>
<div class="tab_content" id="tab_content">
<div class="one">
<p><input type="text"/></p>
<p><input type="password"/></p>
</div>
<div class="two">
![](images/01.png)
</div>
</div>
</div>
2.样式
<style>
*{margin:0;padding:0}
.table{
margin-left: auto;
margin-right: auto;
margin-top: 200px;
width:350px;
border:1px solid #333;
text-align: center;
}
ul{
list-style: none;
}
li{
display: inline-block;
line-height: 50px;
cursor: pointer;
}
.tab{
border-bottom: 1px solid #333;
}
.tab_content{
position: relative;
width:350px;
height:200px;
}
.tab_content>div{
position: absolute;
width:350px;
height:200px;
}
.two{
display: none;
}
.one input{
width:280px;
height:30px;
margin-top: 20px;
}
.current{
color:orange;
}
</style>
3.行为
<script>
var tabs=document.getElementById("tab").getElementsByTagName("li");
var contents = document.getElementById("tab_content").children;
//对标签li遍历实现点击事件,
for(var i=0;i<tabs.length;i++){
/*用value属性记录被点击的li的下标i*/
tabs[i].value=i;
tabs[i].onclick = function(){
//对应的增加current的类,兄弟元素移除current的类;
var siblings = this.previousElementSibling || this.nextElementSibling;
siblings.className="";
this.className="current";
//对div遍历实现所有的div的隐藏,
for(var m=0;m<contents.length;m++){
contents[m].style.display="none";
}
//this的value值,找到点击li的下标并传给div;
contents[this.value].style.display="block";
}
}
</script>
4.分析
1.代码结构写好;
2.在对li进行遍历的时候,要给每个li给一个记录index的标记;