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

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

news 2025/11/4 7:24:32

文章目录

效果图展示

整体制作的一个思路

代码展示

技术细节

小结

效果图展示

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

整体制作的一个思路

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

代码展示


<!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栏切换案例详细讲解！

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

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

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

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

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

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

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

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

C语言精选——选择题Day39

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

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

React 笔记 jsx

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

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

QMenu风格设计qss+阴影

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

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

temu防窒息警示语贴哪里

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

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

Maven——坐标和依赖

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

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

Python中事务的常见用法

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

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

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

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

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

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

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

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

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

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

编程日记 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 中的查询参数，并将它们以对象（键值对）的形式返回* 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 的补码加减法的特点是，当从某个数中减去负数时，将其转换为正数的加法来计算，并将减去正数的情况转换为负数的加法来计算，从而将所有减法运算转换为加法运算。在这种情况下，…...

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

机器学习第15天：GBDT模型

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

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

STM32F407-14.3.9-01输出比较模式

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

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

LeetCode题：174. 地下城游戏

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

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

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

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

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

安装 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

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录一、前言二、UserServiceRpc_Stub 三、 CallMethod方法的重写头文件实现四、rpc调用端的调用实现五、 google::protobuf::RpcController *controller 头文件实现六、总结一、前言在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/10/29 11:04:36

使用VSCode开发Django指南

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

编程新知 2025/10/30 16:33:16

Spark 之入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...

编程新知 2025/10/29 21:50:28

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端目录技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/11/3 8:09:10