源码

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title>login</title><link rel="stylesheet" type="text/css" href="pageChange.css" /><script src="pageChange.js"></script></head><body><div class="control"><div class="item"><div class="active">登录</div><div>注册</div></div><div class="content"><div style="display: block;"><p>账号</p><input type="text" placeholder="username" /><p>密码</p><input type="password" placeholder="password" /><br/><input type="submit" value="登录" /></div><div><p>用户名</p><input type="text" placeholder="username" /><p>密码</p><input type="password" placeholder="password" /><p>邮箱</p><input type="text" placeholder="email" /><br/><input type="submit" value="登录" /></div></div></div></body></html>

CSS

*{margin: 0;padding: 0;}body{background: #f3f3f3;}.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;}.item{width: 340px;height: 60px;background: #eeeeee;}.item div{width: 170px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;}.content{width: 100%;}.content div{margin: 20px 30px;display: none;text-align: left;}p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;}.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;}.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: #00dd60;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;}.active{background: white;}.item div:hover{background: #f6f6f6;}

JavaScript

window.onload = function(){var item = document.getElementsByClassName("item");var it = item[0].getElementsByTagName("div");var content = document.getElementsByClassName("content");var con = content[0].getElementsByTagName("div");for(let i=0;i<it.length;i++){it[i].onclick = function(){for(let j=0;j<it.length;j++){it[j].className = '';con[j].style.display = "none";}this.className = "active";it[i].index=i;con[i].style.display = "block";}}}

效果

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。