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

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

news 2025/7/7 14:23:30

文章目录

文章目录

效果图展示

整体制作的一个思路

代码展示

技术细节

小结

效果图展示

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

整体制作的一个思路

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

代码展示


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

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/6/21 12:50:31

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/7/6 11:27:02

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/7/7 3:36:15

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/6/21 4:17:55

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/6/25 3:04:08

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/7/6 16:09:40

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/6/24 15:42:17

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/6/17 4:01:05

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/7/6 13:29:57