切换

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

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

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

1.代码结构写好；
2.在对li进行遍历的时候，要给每个li给一个记录index的标记；