文章目录
文章目录
效果图展示
整体制作的一个思路
代码展示
技术细节
小结
效果图展示
点击账户登录显示登录的模块，点击二维码登录显示二维码的模块
整体制作的一个思路
点击哪个模块哪个显示，另外一个模块让它隐藏即可！
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/login.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body>
<!-- 登录头部 -->
<div class="xtx-login-header">
<h1 class="logo"></h1>
<a class="home" href="./index.html">进入网站首页</a>
</div>
<!-- 登录内容 -->
<div class="xtx-login-main">
<div class="wrapper">
<form action="" autocomplete="off">
<div class="box">
<div class="tab-nav">
<a href="javascript:;" class="active" data-id="0">账户登录</a>
<a href="javascript:;" data-id="1">二维码登录</a>
</div>
<div class="tab-pane">
<div class="link">
<a href="javascript:;">手机验证码登录</a>
</div>
<div class="input">
<span class="iconfont icon-zhanghao"></span>
<input required type="text" placeholder="请输入用户名称/手机号码" name="username">
</div>
<div class="input">
<span class="iconfont icon-suo"></span>
<input required type="password" placeholder="请输入密码" name="password">
</div>
<div class="agree">
<label for="my-checkbox">
<input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree" >
<span class="iconfont icon-xuanze"></span>
</label>
我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
</div>
<div class="button clearfix">
<button type="submit" class="dl">登 录</button>
<!-- <a class="dl" href="./center.html">登 录</a> -->
<a class="fl" href="./forget.html">忘记密码？</a>
<a class="fr" href="./register.html">免费注册</a>
</div>
</div>
<div class="tab-pane" style="display: none;">
<img class="code" src="./images/code.png" alt="">
</div>
</div>
</form>
</div>
</div>
<!-- 登录底部 -->
<div class="xtx-login-footer">
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
<script>
const tab_nav=document.querySelector(".tab-nav")
const tab_pane=document.querySelectorAll(".tab-pane")
tab_nav.addEventListener("click",function(e){
if(e.target.tagName==='A'){
document.querySelector(".active").classList.remove("active")
e.target.classList.add("active")
for(let i =0;i<tab_pane.length;i++){
tab_pane[i].style.display='none'
}
tab_pane[e.target.dataset.id].style.display='block'
console.log(id);
}
})
(function(){
const form = document.querySelector("form")
const remember=document.querySelector(".remember")
const name_username=document.querySelector("[name=username]")
form.addEventListener("submit",function(e){
e.preventDefault();
if(!remember.checked){
return alert("请先勾选框!")
}
localStorage.setItem("user-xia",name_username.value)
location.href=`./index.html`
})
}())
const li1=document.querySelector(".xtx_navs li:first-child")
const li2=li1.nextElementSibling
function raed(){
const user_xia=localStorage.getItem("user-xia")
if(user_xia){
li1.innerHTML=`
<a href="javascript:;"><i class="iconfont icon-user"> ${user_xia}</i></a>
`
li2.innerHTML=`<a href="javascript:;">退出登录</a>`
}else{
li1.innerHTML=`
<a href="./login.html">请先登录</a>
`
li2.innerHTML=`
<a href="javascript:;">免费注册</a>
`
}
}
raed()
</script>
<style>
/* *{
display: block;
} */
</style>
</body>
</html>是整个页面 的代码（有需要图片素材请联系我！！）
技术细节
e.target.tagName==='A' （判断点击是不是a标签）
document.querySelector(".active").classList.remove("active")（删除类）
e.target.classList.add("active")（让我点击那个标签添加类）
小结
此这篇关于JavaScript实现Tab栏切换功能详解的文章就介绍到这了,更多相关JS Tab栏切换
