前端Demo|实现tab标签切换的登录页面|适合学习前端三件套的同学
前端Demo|实现tab标签切换的登录页面|适合学习前端三件套的同学
学习了这么多天
我们来做个小练习
下面是预计达到的效果
点击登录会出现登录界面
注册则会出现注册的界面
我们的做界面设计的大致思路
等到写完，再做一些调试
下面是完整代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运用JavaScript实现的动态页面</title>
<style>
/* Reset（重置）浏览器默认样式 */
*{
margin: 0;
padding: 0;
}
body{
background: url("IMG_0275.JPG");
background-size: cover;
/* 背景图全覆盖 */
}
.work{
opacity: 0.9;
filter:alpha(opacity=90);
/* opacity或者alpha的值强调的是不透明度 */
width: 340px;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* 设置top：50%，left：50%，然后使用transform来向左向上平移半个内元素的宽和高 */
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;
}
.content 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;
}
.item{
display:flex;
}
</style>
</head>
<body>
<div class="work" >
<!-- 登录与注册页面切换 -->
<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>
<script>
// 实现tab标签切换
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++){
//要为每一个盒子绑定事件，所以用到了for循环
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;
//循环把i的值赋值给it的index
con[i].style.display="block";
//根据索引显示相应的div
}
}
}
</script>
</html>知识点总结
CSS
1.display:inline-block
不设置宽度时，内容撑开宽度；不会独占一行，支持宽高，代码换行被解析成空格，总而言之，inline-block包含了行内元素和块内元素的特点，即设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
2.display:none
可以隐藏我们需要藏起来的区域，我们点击“登录界面”时，“注册界面”就是这么被隐藏起来的。
3.display：block
使用后此元素将显示为块级元素，前后会带有换行符；
块级元素特点：总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
4.box-sizing: border-box
在了解它之前，我们先要知道盒子模型是什么。
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）可以把每一个容器，比如div，都看做是一个盒子模型。
比如，我们给一个div设置的宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red；这时div的宽高就会变为522px (content 500px + padding 20px + border 2px)，相当于一个元素的实际宽高是由：padding + border + content 组成。加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整，省时又省力。
JavaScript
tab标签切换
利用for循环遍历“登录”和“注册”div块；
选中的div进行 onclick 事件时，首先删除所有div的类名，隐藏所有的div盒子
然后给当前点击的按钮添加指定类名，给当前所点击按钮相关联的盒子添加指定属性
E N D