小米登录 es6实现js · javascript

### 代码： ~~~ <title>Document</title> <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; } .show { display: block; } </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"; } } </script> ~~~