## js实现小米登录方式切换 >效果  >html代码 ``` <div class="login"> <ul> <li class="current one">账号登录</li> <li class="two">扫码登录</li> </ul> <div class="contents"> <div class="adm"> <input type="text" placeholder="账号""><br> <input type="password" placeholder="密码""> </div> <div class="code"> <img src="images/code.png" alt=""> </div> </div> </div> ``` >js代码 for循环let法： ``` var lis = document.getElementsByTagName("li"); var contents = document.querySelectorAll(".contents>div"); for(let i=0; i<lis.length; i++){ lis[i].onclick = function(){ for(let i=0; i<lis.length; i++){ lis[i].classList.remove('current'); } lis[i].classList.add('current'); for(let i=0; i<contents.length; i++){ contents[i].style.display = "none"; } contents[i].style.display = "block"; } } ``` for循环var法： ``` var lis = document.getElementsByTagName("li"); var contents = document.querySelectorAll(".contents>div"); for(var i=0; i<lis.length; i++){ lis[i].index = i; //手动赋index值 lis[i].onclick = function(){ for(var j=0; j<lis.length; j++){ lis[j].className = ""; } this.className = "current"; for(var k=0; k<contents.length; k++){ contents[k].style.display = "none"; } contents[this.index].style.display = "block"; } } ```