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

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

news 2026/3/28 0:04:13

文章目录

文章目录

效果图展示

整体制作的一个思路

代码展示

技术细节

小结

效果图展示

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

整体制作的一个思路

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

代码展示


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

大数据运维 | 项目一：大数据分布式集群搭建全攻略

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 前言 作为一名大数据运维工程师&#xff0c;你是否遇到过这样的问题&#xff1a; 问题场景描述1机器A可正常上网&#xff0c;但机器B无法连接网…...

编程新知 2026/3/27 23:48:54

【实战指南】SVN SSL协议不兼容问题：从TLS版本冲突到降级解决方案

1. 当SVN遇上SSL&#xff1a;TLS协议冲突的典型症状 最近在帮团队排查SVN代码拉取问题时&#xff0c;遇到了一个经典的错误提示&#xff1a;"error running context: an error occurred during ssl communication"。这个看似简单的报错背后&#xff0c;其实是现代加密…...

编程新知 2026/3/27 23:42:48

深入解析 Linux 内核中的 PCI 中断向量分配机制：pci_alloc_irq_vectors

1. PCI中断向量分配机制入门指南 第一次接触PCI设备中断处理时&#xff0c;我被各种专业术语搞得晕头转向。直到在项目里实际调试一个网卡驱动时&#xff0c;才真正理解pci_alloc_irq_vectors这个函数的重要性。想象一下&#xff0c;你的电脑就像个繁忙的快递分拣中心&#xf…...

编程新知 2026/3/27 22:44:24

OpenClaw+Qwen3-32B科研助手：文献综述自动生成与参考文献整理

OpenClawQwen3-32B科研助手&#xff1a;文献综述自动生成与参考文献整理 1. 为什么需要AI科研助手&#xff1f; 作为一名计算机专业的研究生&#xff0c;我每天要处理大量文献。最痛苦的时刻莫过于导师突然说"下周组会做个文献综述"&#xff0c;而我手头只有几十篇…...

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

云容笔谈开源镜像优势：免编译、免依赖、BF16原生支持，开箱即生成

云容笔谈开源镜像优势&#xff1a;免编译、免依赖、BF16原生支持&#xff0c;开箱即生成 最近在尝试各种AI图像生成工具时&#xff0c;我发现了一个很有意思的现象&#xff1a;很多工具要么安装配置复杂&#xff0c;要么生成效果不尽如人意&#xff0c;特别是想要生成具有东方…...

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

告别盲目搜索！Unity大版本升级时，系统化处理API变更的5个步骤

Unity大版本升级的系统化实践&#xff1a;从API变更管理到团队协作优化 当Unity 2023 LTS发布时&#xff0c;某中型游戏团队在升级过程中发现超过40%的脚本因API变更而报错&#xff0c;导致项目停滞两周。这种场景在技术迭代中并不罕见&#xff0c;但大多数团队仍采用"遇到…...

编程新知 2026/3/27 21:54:01

Claude浏览器扩展漏洞允许通过任意网站实现零点击XSS提示注入

网络安全研究人员披露了Anthropic公司Claude谷歌浏览器扩展中存在的一个漏洞&#xff0c;攻击者只需诱使用户访问特定网页即可触发恶意提示注入。漏洞原理分析Koi Security研究员Oren Yomtov在提供给The Hacker News的报告中指出&#xff1a;"该漏洞允许任何网站静默地向该…...

编程新知 2026/3/27 21:41:57

如何在5分钟内将网页SVG完美保存为可编辑矢量文件？

如何在5分钟内将网页SVG完美保存为可编辑矢量文件&#xff1f; 【免费下载链接】svg-crowbar Extracts an SVG node and accompanying styles from an HTML document and allows you to download it all as an SVG file. 项目地址: https://gitcode.com/gh_mirrors/sv/svg-cr…...

编程新知 2026/3/27 21:35:57

大模型应用开发：从Demo到生产，小白程序员必看！收藏这份实战指南

本文深入剖析了将大模型应用从原型阶段推向生产环境所面临的关键挑战&#xff0c;涵盖数据处理&#xff08;格式多样性、切块策略、数据更新&#xff09;、检索质量&#xff08;找不到、找不准、找太多&#xff09;、生成阶段&#xff08;幻觉、引用溯源&#xff09;、规模化工…...

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

OpenClaw+Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF：学术论文辅助写作系统

OpenClawQwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF&#xff1a;学术论文辅助写作系统 1. 为什么需要AI辅助学术写作 去年冬天&#xff0c;我在赶一篇计算机视觉领域的会议论文时&#xff0c;经历了所有研究者都熟悉的痛苦&#xff1a;连续三天熬夜整理参考文献、…...

编程新知 2026/3/27 19:08:50