当前位置： 首页 > news >正文

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

news 2026/3/28 3:29:33

文章目录

文章目录

效果图展示

整体制作的一个思路

代码展示

技术细节

小结

效果图展示

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

整体制作的一个思路

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

代码展示


<!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>

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

技术细节

e.target.tagName==='A' （判断点击是不是a标签）

 document.querySelector(".active").classList.remove("active")（删除类）
 e.target.classList.add("active")（让我点击那个标签添加类）

小结

此这篇关于JavaScript实现Tab栏切换功能详解的文章就介绍到这了,更多相关JS Tab栏切换

相关文章：

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

文章目录 文章目录 效果图展示 整体制作的一个思路 代码展示 技术细节 小结 效果图展示 点击账户登录显示登录的模块&#xff0c;点击二维码登录显示二维码的模块 整体制作的一个思路 点击哪个模块哪个显示&#xff0c;另外一个模块让它隐藏即可&#xff01; 代码展示 <!…...

编程日记 2023/12/8 22:14:10

制作一个RISC-V的操作系统三-编译与链接

文章目录 GCCGCC简介GCC的命令格式gcc -Egcc -cgcc -Sgcc -ggcc -vGCC的主要执行步骤GCC涉及的文件类型针对多个源文件的处理 ELFELF介绍ELF文件格式ELF文件处理相关工具&#xff1a;Binutils&#xff08;binary utility&#xff09;readlelf -hreadelf -S或readelf -SW&#x…...

编程日记 2023/12/8 22:13:07

tmux工具--程序部署在服务器上持久化执行

程序部署在服务器上&#xff0c;想持久化执行 做以下操作&#xff1a; 在服务器上安装 tmux工具 对于 Ubuntu 或 Debian&#xff1a; sudo apt-get install tmux对于 CentOS 或 RHEL&#xff1a; sudo yum install tmux对于 Fedora&#xff1a; sudo dnf install tmux对于…...

编程日记 2023/12/8 22:10:06

C语言精选——选择题Day39

第一题 1. 有下面的定义&#xff0c;则 sizeof(s) 为多少&#xff1f; char *s "\ta\017bc"; A&#xff1a;9 B&#xff1a;5 C&#xff1a;6 D&#xff1a;7 答案及解析 C 本题涉及到了转义字符 \t 是水平制表符&#xff0c;算一个字节 \017 是表示八进制数&#…...

编程日记 2023/12/8 22:06:02

React 笔记 jsx

严格约定&#xff1a;React 组件必须以大写字母开头&#xff0c;而 HTML 标签则必须是小写字母。 React JSX JSX 是由 React 推广的 JavaScript 语法扩展。 用于表达组件的 特殊语法的 js 函数 要求标签必须闭合&#xff1b;返回的组件必须包裹在一个父标签内&#xff1b; …...

编程日记 2023/12/8 22:05:01

QMenu风格设计qss+阴影

Qt的菜单经常在软件开发中用到&#xff0c;默认的菜单效果都不符合设计师的要求&#xff0c;本篇介绍QMenu菜单的风格设计&#xff0c;包括样式表和阴影。 1.QMenu样式表的设计 首先看一个默认的菜单 void QGraphicsDropShadowEffectDemo::slotShowDialog() {qDebug() <&l…...

编程日记 2023/12/8 22:02:58

temu防窒息警示语贴哪里

防窒息警示语标签的位置选择是确保消费者在购买和使用产品时能够注意到潜在窒息风险的重要一环。本文将为您介绍一些关于防窒息警示语标签贴在哪里的建议&#xff0c;以帮助您选择合适的位置。 先给大家推荐一款拼多多/temu运营工具——多多情报通 多多情报通是拼多多的生意参…...

编程日记 2023/12/8 22:01:57

Maven——坐标和依赖

Maven的一大功能是管理项目依赖。为了能自动化地解析任何一个Java构件&#xff0c;Maven就必须将它们唯一标识&#xff0c;这就依赖管理的底层基础——坐标。将详细分析Maven坐标的作用&#xff0c;解释其每一个元素&#xff1b;在此基础上&#xff0c;再介绍如何配置Maven&…...

编程日记 2023/12/8 21:58:55

Python中事务的常见用法

在Python中&#xff0c;可以使用数据库连接对象来执行事务操作。以下是一些常见的 Python 中事务的用法&#xff1a; 开始事务 要开始一个事务&#xff0c;你需要获取数据库连接对象&#xff0c;并调用其 begin() 或 start_transaction() 方法来开启一个事务。例如&#xff0…...

编程日记 2023/12/8 21:57:54

蛮力法最大值连续子序问题

概念: 在一个给定的整数数组中找到一个连续的子序列&#xff0c;使得子序列的元素之和最大 思路: 遍历所有可能的子序列&#xff0c;计算它们的和。 在每次计算过程中&#xff0c;记录当前最大的子序列和。 返回最大的子序列和作为结果。 代码: #include <iostream> #…...

编程日记 2023/12/8 21:56:53

多功能智能遥测终端机 5G/4G+北斗多信道 视频采集传输

计讯物联多功能智能遥测终端机&#xff0c;全网通5G/4G无线通信、弱信号地区北斗通信&#xff0c;多信道自动切换保障通信联通&#xff0c;丰富网络接口及行业应用接口&#xff0c;支持水利、环保、工业传感器、控制终端、智能终端接入&#xff0c;模拟量/数字量/信号量采集&am…...

编程日记 2023/12/8 21:52:50

1.查看表的基本结构，表的详细结构和修改表名

查看表的基本结构,表的详细结构和修改表名 1.查看数据表基本结构 有强迫症或健忘症的小伙伴们在建好数据库和表以后&#xff0c;通常会怀疑自己刚才是不是敲错了&#xff0c;怎么办&#xff1f;如果不是使用图形界面是不是就没法查看啦&#xff1f; 不存在的&#xff0c;这就…...

编程日记 2023/12/8 21:50:48

Mybatis实用教程之XML实现动态sql

系列文章目录 1、mybatis简介及数据库连接池 2、mybatis中selectOne的使用 3、mybatis简单使用 4、mybatis中resultMap结果集的使用 Mybatis实用教程之XML实现动态sql 系列文章目录前言1. 动态条件查询2. 动态更新语句3. 动态插入语句4、其他标签的使用 前言 当编写 MyBatis 中…...

编程日记 2023/12/8 21:49:47

混合App开发实现页面跳转（更新中）

util.js /*** 这个函数被用来获取 URL 中的查询参数&#xff0c;并将它们以对象&#xff08;键值对&#xff09;的形式返回* param {string} url* returns {object} oParams*/ export function getUrlQuery(url null) {let sUrl url || window.location.href;let oParams {…...

编程日记 2023/12/8 21:48:46

【FPGA】Verilog：BCD 加法器的实现

0x00 XOR 运算在 2 的补码加减法中的应用 2 的补码加减法的特点是&#xff0c;当从某个数中减去负数时&#xff0c;将其转换为正数的加法来计算&#xff0c;并将减去正数的情况转换为负数的加法来计算&#xff0c;从而将所有减法运算转换为加法运算。在这种情况下&#xff0c;…...

编程日记 2023/12/8 21:46:45

机器学习第15天：GBDT模型

☁️主页 Nowl &#x1f525;专栏《机器学习实战》 《机器学习》 &#x1f4d1;君子坐而论道&#xff0c;少年起而行之 ​​ 文章目录 GBDT模型介绍 Boosting 残差 GBDT的缺点 python代码实现 代码 模型参数解释 结语 GBDT模型介绍 GBDT&#xff08;Gradient Boos…...

编程日记 2023/12/8 21:45:44

STM32F407-14.3.9-01输出比较模式

输出比较模式 此功能用于控制输出波形&#xff0c;或指示已经过某一时间段。 当捕获/比较寄存器与计数器之间相匹配时&#xff0c;输出比较功能&#xff1a; ● 将为相应的输出引脚分配一个可编程值&#xff0c;该值由输出比较模式&#xff08;TIMx_CCMRx 寄存器中的 OCxM⑦…...

编程日记 2023/12/8 21:44:42

LeetCode题：174. 地下城游戏

目录 一、题目要求 二、解题思路 &#xff08;1&#xff09;状态表示 &#xff08;2&#xff09;状态转移方程 &#xff08;3&#xff09;初始化dp表 &#xff08;4&#xff09;填表顺序 &#xff08;5&#xff09;返回值 三、代码 一、题目要求 174. 地下城游戏 恶魔们…...

编程日记 2023/12/8 21:41:40

CSS、JS文件无法正确加载至页面问题与解决

目录 1. 问题出现 2. 分析与解决 3. 总结 1. 问题出现 自己在写项目是时候&#xff0c;想启动浏览器查询首页面index.jsp的显示效果 预期效果应该是下面这样的&#xff1a; 但是实际上是这样的&#xff1a; 意思也就是说可能是关于CSS、JS相关的引入方面出了问题&#xff…...

编程日记 2023/12/8 21:40:39

ftp的服务安装配置

安装 yum install -y vsftpd # 是否安装成功 rpm -qa | grep vsftpd # 是否开机启动 systemctl list-unit-files | grep vsftpd # 开机启动 systemctl enable vsftpd.service # ftp端口 netstat -antup | grep ftp # 状态 service vsftpd status service vsftpd start service…...

编程日记 2023/12/8 21:39:38

pykg2vec功能mastery：知识图谱嵌入模型的高级配置与优化

pykg2vec功能mastery&#xff1a;知识图谱嵌入模型的高级配置与优化 【免费下载链接】pykg2vec 项目地址: https://gitcode.com/gh_mirrors/py/pykg2vec 问题导入 知识图谱嵌入模型训练中&#xff0c;开发者常面临三大痛点&#xff1a;模型参数调优耗时且效果不佳、不…...

编程新知 2026/3/28 2:22:51

RGBLEDBlender：嵌入式RGB LED色彩混合与动态控制框架

1. RGBLEDBlender 库深度解析&#xff1a;面向嵌入式系统的 RGB 色彩混合与动态控制框架RGBLEDBlender 是一个轻量级、面向硬件的 RGB LED 色彩混合库&#xff0c;专为资源受限的微控制器平台&#xff08;尤其是 Arduino 生态&#xff09;设计。该库由 Erik Sikich 于 2016 年 …...

编程新知 2026/3/28 1:44:02

Mojo+Python混合部署案例深度拆解（从Jupyter到生产环境的无缝迁移全路径）

第一章&#xff1a;MojoPython混合部署案例深度拆解&#xff08;从Jupyter到生产环境的无缝迁移全路径&#xff09;Mojo 作为新兴的系统级编程语言&#xff0c;与 Python 生态天然兼容&#xff0c;为机器学习模型从探索性开发&#xff08;Jupyter Notebook&#xff09;迈向高吞…...

编程新知 2026/3/28 1:19:39

PCB布局设计规范与最佳实践指南

PCB布局设计的最佳实践指南1. 布局设计基础原则1.1 结构约束优先处理在PCB布局初期&#xff0c;必须优先考虑机械结构约束条件&#xff1a;根据导入的结构文件定位所有有特殊位置要求的器件连接器1脚位置必须与结构设计完全匹配严格遵守产品设计中规定的元件限高要求1.2 美观与…...

编程新知 2026/3/28 0:15:21

高效对接Tiktok电商API：PHP开发者的一站式解决方案指南

高效对接Tiktok电商API&#xff1a;PHP开发者的一站式解决方案指南 【免费下载链接】tiktokshop-php Unofficial Tiktok Shop API Client in PHP. Use API version 202309 and later 项目地址: https://gitcode.com/gh_mirrors/ti/tiktokshop-php 在瞬息万变的电商生态中…...

编程新知 2026/3/27 23:30:40

RustDesk 中继服务器搭建指南：告别卡顿，实现高效远程控制

1. 为什么你需要自建RustDesk中继服务器 远程办公已经成为现代工作方式的标配&#xff0c;但很多人在使用公共远程控制服务时都遇到过令人抓狂的卡顿问题。想象一下&#xff0c;你正在紧急处理服务器故障&#xff0c;画面却卡成了PPT&#xff1b;或者需要远程协助家人修电脑&a…...

编程新知 2026/3/27 22:38:22

PlayCover如何重塑Mac游戏体验？社交与云服务革新玩法深度解析

PlayCover如何重塑Mac游戏体验&#xff1f;社交与云服务革新玩法深度解析 【免费下载链接】PlayCover Community fork of PlayCover 项目地址: https://gitcode.com/gh_mirrors/pl/PlayCover PlayCover作为一款开源的Mac iOS模拟器&#xff0c;通过深度整合Discord社交功…...

编程新知 2026/3/27 21:56:02

二进制入门及其运算

二进制,十进制以及它们之间的转换- 十进制:我们日常生活中最常用的计数系统是\它的基数是10,使用0 - 9这十个数字来表示数。每个数位的权重是10的幂次方,从右往左依次是10⁰、10、10等。例如,数字234可以表示为210 310 410⁰。- 二进制:是计算机科学中广泛使用的计数系统。它的…...

编程新知 2026/3/27 21:29:55

智能汽车远程诊断怎么玩？深入聊聊DoIP协议里的那些‘暗号’：VIN、EID、激活线与安全

智能汽车远程诊断的通信密码&#xff1a;DoIP协议中的VIN、EID与安全设计解析 当你的爱车亮起故障灯时&#xff0c;4S店技师只需轻点平板电脑&#xff0c;就能远程读取车辆状态——这背后是车载以太网诊断协议(DoIP)在发挥作用。不同于传统CAN总线诊断&#xff0c;基于IP网络的…...

编程新知 2026/3/27 20:57:42

如何为Unity游戏实现实时翻译：XUnity Auto Translator完整指南

如何为Unity游戏实现实时翻译&#xff1a;XUnity Auto Translator完整指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 你是否遇到过想玩一款优秀的Unity游戏&#xff0c;却发现它只支持日语或英语&am…...

编程新知 2026/3/27 19:44:59