小米登录es5实现js · javascript

### 代码： ~~~ <style> *{margin: 0;padding: 0} .nav{ position: relative; width: 300px; height: 400px; border: 1px solid #333; margin: 50px; display: flex; justify-content: space-around; } .nav li,span{ line-height: 50px; list-style: none; height: 50px; cursor: pointer; } .nav li a{ text-decoration: none; } #zhangh,#saoma{ margin-top: 30px; text-align: center; margin-left: auto; margin-right: auto; position: absolute; top: 50px; } #saoma img{ width: 180px; height: 180px; } .none{ display: none; } .current{ color: red; } </style> </head> <body> <ul class="nav" id="nav"> <li>账号登录</li> <span>|</span> <li>扫码登录</li> <div id="zhangh"> <input type="text"> <input type="text"><br> <button>立即登录</button> </div> <div id="saoma" class="none"> <img src="images/现代.png" alt=""> </div> </ul> <script> // var li = document.getElementsByTagName("li"); // var zhangh = document.getElementById("zhangh"); // var cont = document.querySelectorAll(".nav>div"); // for (let i = 0; i < li.length; i++) { // li[i].onclick = function () { // for (let i = 0; i < li.length; i++) { // li[i].style.color = "#000" // } // li[i].style.color = "red" // for (let i = 0; i < cont.length; i++) { // cont[i].style.display = "none" // } // cont[i].style.display = "block"; // } // } var lis =document.getElementsByTagName("li"); var contents=document.querySelectorAll("#nav div"); // 1.点击换色 for(var i=0;i<lis.length;i++){ lis[i].index=i; lis[i].onclick=function(){ for(var k=0;k<lis.length;k++){ lis[k].className=""; } this.className="current"; // 2.让对应的content显示 for(var m=0;m<contents.length;m++){ contents[m].style.display="none"; } // console.log(i); js加载完成之后i的值就变成2le 不管点击事件 contents[this.index].style.display="block"; } } </script> </body> ~~~