本地网站建设流程,宝塔搭建app教程,网站建设的主要情况说明,精品网站制作文章目录 文章目录 效果图展示 整体制作的一个思路 代码展示 技术细节 小结 效果图展示 点击账户登录显示登录的模块#xff0c;点击二维码登录显示二维码的模块
整体制作的一个思路 点击哪个模块哪个显示#xff0c;另外一个模块让它隐藏即可#xff01;
代码展示 !… 文章目录 文章目录 效果图展示 整体制作的一个思路 代码展示 技术细节 小结 效果图展示 点击账户登录显示登录的模块点击二维码登录显示二维码的模块
整体制作的一个思路 点击哪个模块哪个显示另外一个模块让它隐藏即可
代码展示 !DOCTYPE html
html langenheadmeta charsetUTF-8title小兔鲜儿 - 新鲜 惠民 快捷!/titlemeta http-equivX-UA-Compatible contentIEedgemeta namerenderer contentwebkitlink relshortcut icon href../favicon.icolink relstylesheet href./css/common.csslink relstylesheet href./css/login.csslink relstylesheet hrefhttps://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css
/headbody!-- 登录头部 --div classxtx-login-headerh1 classlogo/h1a classhome href./index.html进入网站首页/a/div!-- 登录内容 --div classxtx-login-maindiv classwrapperform action autocompleteoffdiv classboxdiv classtab-nava hrefjavascript:; classactive data-id0账户登录/aa hrefjavascript:; data-id1二维码登录/a/divdiv classtab-panediv classlinka hrefjavascript:;手机验证码登录/a/divdiv classinputspan classiconfont icon-zhanghao/spaninput required typetext placeholder请输入用户名称/手机号码 nameusername/divdiv classinputspan classiconfont icon-suo/spaninput required typepassword placeholder请输入密码 namepassword/divdiv classagreelabel formy-checkboxinput typecheckbox value1 idmy-checkbox classremember nameagree span classiconfont icon-xuanze/span/label我已同意 a hrefjavascript:;《服务条款》/a hrefjavascript:; 和 a《服务条款》/a/divdiv classbutton clearfixbutton typesubmit classdl登 录/button!-- a classdl href./center.html登 录/a --a classfl href./forget.html忘记密码/aa classfr href./register.html免费注册/a/div/divdiv classtab-pane styledisplay: none;img classcode src./images/code.png alt/div/div/form/div/div!-- 登录底部 --div classxtx-login-footer!-- 版权信息 --div classcopyrightpa hrefjavascript:;关于我们/aa hrefjavascript:;帮助中心/aa hrefjavascript:;售后服务/aa hrefjavascript:;配送与验收/aa hrefjavascript:;商务合作/aa hrefjavascript:;搜索推荐/aa hrefjavascript:;友情链接/a/ppCopyRight copy; 小兔鲜儿/p/div/divscriptconst tab_navdocument.querySelector(.tab-nav)const tab_panedocument.querySelectorAll(.tab-pane)tab_nav.addEventListener(click,function(e){if(e.target.tagNameA){document.querySelector(.active).classList.remove(active)e.target.classList.add(active)for(let i 0;itab_pane.length;i){tab_pane[i].style.displaynone}tab_pane[e.target.dataset.id].style.displayblockconsole.log(id);}})(function(){const form document.querySelector(form)const rememberdocument.querySelector(.remember)const name_usernamedocument.querySelector([nameusername])form.addEventListener(submit,function(e){e.preventDefault();if(!remember.checked){return alert(请先勾选框!)}localStorage.setItem(user-xia,name_username.value)location.href./index.html})}())const li1document.querySelector(.xtx_navs li:first-child)const li2li1.nextElementSiblingfunction raed(){const user_xialocalStorage.getItem(user-xia)if(user_xia){li1.innerHTMLa hrefjavascript:;i classiconfont icon-user ${user_xia}/i/ali2.innerHTMLa hrefjavascript:;退出登录/a}else{li1.innerHTMLa href./login.html请先登录/ali2.innerHTMLa hrefjavascript:;免费注册/a}}raed()/scriptstyle/* *{display: block;} *//style
/body/html
是整个页面 的代码有需要图片素材请联系我
技术细节
e.target.tagNameA 判断点击是不是a标签 document.querySelector(.active).classList.remove(active)删除类 e.target.classList.add(active)让我点击那个标签添加类
小结
此这篇关于JavaScript实现Tab栏切换功能详解的文章就介绍到这了,更多相关JS Tab栏切换
