# 2. tab 页面切换  ~~~ * { margin: 0; padding: 0; } .load { width: 400px; text-align: center; border: 1px solid#333; height: 800px; background: #fff; height: 480px; padding: 35px 0 20px; margin: 100px; } .load ul li { list-style: none; margin: 0 20px 35px; display: inline-block; font-size: 22px; color: #000; } .current { color: #f56600 !important; } input { width: 325px; height: 50px; margin-bottom: 15px; border: 1px solid #e0e0e0; padding-left: 15px; } button { margin: 10px 0 20px; width: 340px; height: 50px; border: none; background: #f56600; color: #fff; font-size: 18px; } .zhuce a { color: #999999; font-size: 12px; } .zhuce>a:hover { background: #338fff; color: #fff; } .zhuce { margin-bottom: 120px; } fieldset { border: none; /* border-top: 1px solid #333; */ } .border { border-top: 1px solid#333; width: 340px; display: inline-block; /* height: 0px; */ } .allpay a { display: inline-block; background: #747474; border-radius: 50%; width: 30px; height: 30px; margin: 10px 20px; position: relative; } .allpay span { position: absolute; width: 20px; height: 20px; background: url("images/icons_type.png") no-repeat; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; } .allpay .qq { background-position-x: -18px; } .allpay .weibo { background-position-x: -37px; } .allpay .zhifubao { background-position-x: -57px; } .allpay .weixin { width: 23px; margin-left: -11.5px; background-position-x: -84px; } .two { display: none; padding-top: 50px; } .content { position: relative; } .content>div { position: absolute; width: 100%; height: 100%; } ~~~ ~~~ <div class="load"> <ul> <li class="current">账号登录</li> <span>|</span> <li>扫码注册</li> </ul> <div class="content"> <div class="one"> <div> <from> <div> <input type="text" placeholder="邮箱/手机号/小米账号" /> </div> <div> <input type="password" placeholder="密码"> </div> <div> <button>立即登录</button> </div> </from> </div> <div class="zhuce"> <a href="#">注册小米账号</a> <span>&nbsp;|&nbsp;</span> <a href="#">忘记密码？</a> </div> <fieldset class="border"> <legend>其他登录方式</legend> </fieldset> <div class="allpay"> <a href="#"> <span class="qq"></span> </a> <a href="#"> <span class="weibo"></span> </a> <a href="#"> <span class="zhifubao"></span> </a> <a href="#"> <span class="weixin"></span> </a> </div> </div> <div class="two"> <img src="images/01.png" alt=""> </div> </div> </div> <script> var lis = document.getElementsByTagName("li"); var contents = document.querySelectorAll(".content>div"); for (let i = 0; i < lis.length; i++) { // lis[i].index=i; lis[i].onclick = function () { //1.点击tab变色 for (var k = 0; k < lis.length; k++) { lis[k].className = ""; } this.className = "current"; //2.让对应的content出现 for (let i = 0; i < contents.length; i++) { contents[i].style.display = "none"; } contents[i].style.display = "block"; //contents[this.index].style.display="block"; } } </script>