文章目錄
文章目錄
效果圖展示
整體制作的一個思路
代碼展示
技術細節
小結
效果圖展示
點擊賬戶登錄顯示登錄的模塊，點擊二維碼登錄顯示二維碼的模塊
整體制作的一個思路
點擊哪個模塊哪個顯示，另外一個模塊讓它隱藏即可！?
代碼展示
<!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.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>是整個頁面?的代碼（有需要圖片素材請聯系我！！）
技術細節
e.target.tagName==='A' （判斷點擊是不是a標簽）
?document.querySelector(".active").classList.remove("active")（刪除類）
?e.target.classList.add("active")（讓我點擊那個標簽添加類）
小結
此這篇關于JavaScript實現Tab欄切換功能詳解的文章就介紹到這了,更多相關JS Tab欄切換
)
