JS实现简单的登录注册页签

项目要求：

利用前端知识编写一个简单的网站登录和注册页签。登录和注册功能均在同一页面，点击登录按键就进入登录操作，点击注册按键则进入用户的注册操作。其中，登录和注册的内容和大部分网站的登录注册内容一直相同即可。

项目编写：

因为我们要实现一个页签，那就必须要先编写一个前端展示界面。那就将HTML和CSS结合运用起来即可，具体如下图：

<div class="container">
    			
			<div class="form">
				<ul>
					<li class="lf active">注册</li>
					<li class="lf ">登录</li>
					<div class="clear"></div>
				</ul>
				
				<div id="contents">
					<div class="active">
						<form action="/login" method="post">
							<lable for="username">用户名</lable> <input type="text"                     
                             id="username" placeholder="请输入用户名">
							<br>
							<lable for="password">密码</lable> <input type="password"             
                             id="password" placeholder="请输入密码">
							<br>
							<lable for="password2">重复密码</lable> <input 
                             type="password" id="password2" placeholder="请再次输入密码">
							<br>
							<input type="submit" value="注册"/>
						</form>
					</div>
					<div >
						<form action="/regist" method="post">
							<lable for="username1">用户名</lable> <input type="text" 
                             id="username1" placeholder="请输入用户名">
							<br>
							<lable for="password1">密码</lable> <input type="password" 
                             id="password1" placeholder="请输入密码">
							<br>
							<input type="submit" value="登录"/>
						</form>
					</div>
				</div>
			</div>
</div>

*{
	margin: 0;padding: 0;
	box-sizing: border-box;
}

.container{
	width: 1200px;
	margin: 0 auto;
}

/* body{
	color: #666;
	background-color: #fff;
	font-size: 14px ;
} */

.lf{
	float: left;
}

.rt{
	float: right;
}

.clear{
	clear: both;
}

a{
	text-decoration: none;
}
ul,ol,li{
	list-style: none;
}
input{
	outline: none;
}           
            .container{
				height: 1000px;
				border: 1px solid lightblue;
				text-align: center;
			}
			.form{
				width: 30%;
				margin: 0 auto;
				margin-top: 50px;
				border: 1px dotted lightcoral;
				border-radius: 10px;
				overflow: hidden;
			}
			.form ul{
				border-bottom: 1px solid lightgreen;
			}
			.form ul li{
				height: 30px;
				line-height: 30px;
				width: 50%;
			}
			.form ul li.active{
				background-color: lightgray;
			}
			.form ul li+li{
				border-left: 1px solid lightgreen;
			}
			.form #contents>div{
				display: none;
			}
			.form #contents>div.active{
				display: block;
			}

以上是项目的框架和样式，但还不够，还需要写出相应的JS程序去执行对应的功能操作。具体如下：

            <script type="text/javascript">
				let tabs = document.getElementsByTagName("li");
				let contents = document.getElementById("contents").children;
				for(let i=0;i<tabs.length;i++){
					tabs[i].onclick=function(){
						console.log("点击了", tabs[i].innerText);
						// 去除所有 li上的active类名
						for(let j=0;j<tabs.length;j++){
							tabs[j].setAttribute("class", "lf");
						}
						tabs[i].setAttribute("class", "lf active");
							
						// 去除所有div上的active
						for(let j=0;j<contents.length;j++){
							contents[j].removeAttribute("class");
						}
						// 和li索引一样的div添加类名
						contents[i].setAttribute("class", "active");
					}
				}
				
			</script>

结果展示：

希望此次分享能给大家带来一些前端网页以及JS知识上的帮助（喜欢小编的关注、点赞走一波呦，后期会不定期分享更多Python、JS和前端相关知识）