## 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"; } } ```