实例解析关于兔鲜登录tab栏切换案例详细讲解！

文章目录

效果图展示

整体制作的一个思路

代码展示

技术细节

小结

效果图展示

点击账户登录显示登录的模块，点击二维码登录显示二维码的模块

整体制作的一个思路

点击哪个模块哪个显示，另外一个模块让它隐藏即可！

代码展示


<!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 &copy; 小兔鲜儿</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.nextElementSiblingfunction 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>

是整个页面的代码（有需要图片素材请联系我！！）