项目要求:
利用前端知识编写一个简单的网站登录和注册页签。登录和注册功能均在同一页面,点击登录按键就进入登录操作,点击注册按键则进入用户的注册操作。其中,登录和注册的内容和大部分网站的登录注册内容一直相同即可。
项目编写:
因为我们要实现一个页签,那就必须要先编写一个前端展示界面。那就将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和前端相关知识)