HTML+CSS+JavaScript:利用事件委托实现tab栏切换

news2024/11/15 6:13:36

一、需求

实现tab栏切换

 

二、代码素材

以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写

<!-- JS方法实现tab栏切换 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }

        .tab-nav {
            width: 100%;
            /* 宽度与父元素相同 */
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        .tab-nav h3 {
            font-size: 24px;
            font-weight: normal;
            margin-left: 20px;
        }

        .tab-nav ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }

        .tab-nav ul li {
            margin: 0 20px;
            font-size: 14px;
        }

        .tab-nav ul li a {
            text-decoration: none;
            border-bottom: 2px solid transparent;
            color: #333;
        }

        .tab-nav ul li a.active {
            border-color: #e1251b;
            color: #e1251b;
        }

        .tab-content {
            padding: 0 16px;
        }

        .tab-content .item {
            display: none;
        }

        .tab-content .item.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab-nav">
            <h3>每日特价</h3>
            <ul>
                <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
                <li><a href="javascript:;" data-id="1">美食</a></li>
                <li><a href="javascript:;" data-id="2">百货</a></li>
                <li><a href="javascript:;" data-id="3">个护</a></li>
                <li><a href="javascript:;" data-id="4">预告</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item active"><img src="./images/tab00.png" alt="" /></div>
            <div class="item"><img src="./images/tab01.png" alt="" /></div>
            <div class="item"><img src="./images/tab02.png" alt="" /></div>
            <div class="item"><img src="./images/tab03.png" alt="" /></div>
            <div class="item"><img src="./images/tab04.png" alt="" /></div>
        </div>
    </div>

    <script>
        
    </script>
</body>

</html>

三、完整代码

<!-- JS方法实现tab栏切换 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }

        .tab-nav {
            width: 100%;
            /* 宽度与父元素相同 */
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        .tab-nav h3 {
            font-size: 24px;
            font-weight: normal;
            margin-left: 20px;
        }

        .tab-nav ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }

        .tab-nav ul li {
            margin: 0 20px;
            font-size: 14px;
        }

        .tab-nav ul li a {
            text-decoration: none;
            border-bottom: 2px solid transparent;
            color: #333;
        }

        .tab-nav ul li a.active {
            border-color: #e1251b;
            color: #e1251b;
        }

        .tab-content {
            padding: 0 16px;
        }

        .tab-content .item {
            display: none;
        }

        .tab-content .item.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab-nav">
            <h3>每日特价</h3>
            <ul>
                <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
                <li><a href="javascript:;" data-id="1">美食</a></li>
                <li><a href="javascript:;" data-id="2">百货</a></li>
                <li><a href="javascript:;" data-id="3">个护</a></li>
                <li><a href="javascript:;" data-id="4">预告</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item active"><img src="./images/tab00.png" alt="" /></div>
            <div class="item"><img src="./images/tab01.png" alt="" /></div>
            <div class="item"><img src="./images/tab02.png" alt="" /></div>
            <div class="item"><img src="./images/tab03.png" alt="" /></div>
            <div class="item"><img src="./images/tab04.png" alt="" /></div>
        </div>
    </div>

    <script>
        const ul = document.querySelector('ul')
        ul.addEventListener('click', e => {
            const { tagName, dataset } = e.target
            if (tagName === 'A') {
                document.querySelector('.tab-nav .active').classList.remove('active')
                e.target.classList.add('active')
                document.querySelector('.tab-content .active').classList.remove('active')
                //注意,dataset.id是字符型的,字符型与数字相加,会发生隐式转换,如'0'+1==='01'
                //所以需要先将dataset.id转换为数字型
                document.querySelector(`.tab-content .item:nth-child(${Number(dataset.id) + 1})`).classList.add('active')
            }
        })
    </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/835695.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[java刷算法]牛客—剑指offer链表复习、手写简易正则匹配

&#x1f9db;‍♂️个人主页&#xff1a;杯咖啡&#x1f4a1;进步是今天的活动&#xff0c;明天的保证&#xff01;✨目前正在学习&#xff1a;SSM框架,算法刷题&#x1f449;本文收录专栏 &#xff1a; java刷算法牛客—剑指offer&#x1f64c;牛客网&#xff0c;刷算法过面试…

【传统视觉】C#创建、封装、调用类库

任务 因为实现代码相对简单&#xff0c;然后又没有使用Opencv&#xff0c;所以就直接用C#实现&#xff0c;C#调用。 1.创建类库 1.1新建一个类库 vs2015 > 文件 > 新建 > 项目 using System; using System.Collections.Generic; using System.Linq;namespace Yo…

使用ChatGPT编写技术文档

技术文档对于任何项目都是至关重要的&#xff0c;因为它确保所有利益相关者都在同一层面上&#xff0c;并允许有效的沟通和协作。创建详细而准确的技术文档可能既耗时又具有挑战性&#xff0c;特别是对于那些不熟悉主题或缺乏强大写作技巧的人来说。ChatGPT 是一个强大的人工智…

服务器流量

1.服务器流量分为入流量和出流量 入流量&#xff08;Inbound Traffic&#xff09;是指流向服务器的数据流量&#xff0c;也就是客户端发送到服务器的数据。这些数据可能包括请求信息、文件上传等。 出流量&#xff08;Outbound Traffic&#xff09;是指从服务器流向客户端的数…

[C++] 类与对象(中)类中六个默认成员函数(2)-- 运算符重载 -- 取地址及const取地址操作符重载

1、前言 本篇我们以日期类来展开讲。对于一个日期&#xff0c;我们如何去比大小呢&#xff1f;对年月日依次进行比较可以&#xff0c;但是可以直接比较吗? 我们可以看到&#xff0c;对于自定义类型的日期类直接去比较两个日期的大小是错误的&#xff0c;因此我们需要对运算符赋…

C. Candy Store

Problem - 1798C - Codeforces 思路&#xff1a;要求的最小的标签数量&#xff0c;我们可以先考虑贪心&#xff0c;对于第一个来说它一定会使用一个标签&#xff0c;然后就让后面尽可能多的跟当前这个共用一个标签&#xff0c;如果不行&#xff0c;则在使用一个新的。那么对于共…

Python+Robot Framework实现接口自动化测试

最近在研究PythonRobot Framework的接口自动化&#xff0c;摸清了一些套路&#xff0c;想着总结一下&#xff0c;分享给大家&#xff0c;希望对做自动化的同学有所启发。 主要用到了Python的requests&#xff0c;json&#xff0c;hashlib库&#xff0c;下面以登录和开启文档/目…

“云教室”来了! 麒麟信安打造晋城市红星小学多媒体教室建设新标杆

当前&#xff0c;教育行业正面临教育信息化的重大变革。随着信息技术的发展&#xff0c;集声音、图像、视频动画等多种功能于一体的信息技术课逐渐成为学生群体最受欢迎的课程之一。 近日&#xff0c;麒麟信安为晋城市红星小学量身打造的“云教室”全新上线。据悉&#xff0c;…

IDEA如何生成 serialVersionUID

序列化和反序列化 Java是面向对象的语言&#xff0c;与其他语言进行交互&#xff08;比如与前端js进行http通信&#xff09;&#xff0c;需要把对象转化成一种通用的格式比如json&#xff08;前端显然不认识Java对象&#xff09;&#xff0c;从对象到json字符串的转换&#xff…

【css】css实现字母大小写转换

text-transform 属性用于指定文本中的大写和小写字母。 uppercase&#xff1a;将字母转为大写lowercase&#xff1a;将字母转为小写capitalize&#xff1a;将每个单词首字母转为大写 代码&#xff1a; <style> p.uppercase {text-transform: uppercase; }p.lowercase …

Mendix Excel导出介绍

一、前言 之前我们聊到企业实现应用现代化是一项长期的任重道远的工作&#xff0c;通过Excel导入组件可以作为一个好的起点把企业的业务从线下迁移到线上&#xff0c;当把应用迁移之后&#xff0c;最终结果会有各种的报表展示&#xff0c;这时基于实际业务的需求&#xff0c;我…

springboot jekins打包

新建Item 选择freestyle 配置下拉框 This project is parameterized 配置git 构建shell脚本 脚本 BUILD_IDDONTKILLME . /etc/profile export PROJ_PATHpwd export TOMCAT_APP_PATH/root/local/apache-tomcat-8.5.45 export BASE_PATH/root/localecho $PROJ_PATH echo $TO…

ESP32-C2开发板 ESP8684芯片 兼容ESP32-C3开发

C2是一个芯片采用4毫米x 4毫米封装&#xff0c;与272 kB内存。它运行框架&#xff0c;例如ESP-Jumpstart和ESP造雨者&#xff0c;同时它也运行ESP-IDF。ESP-IDF是Espressif面向嵌入式物联网设备的开源实时操作系统&#xff0c;受到了全球用户的信赖。它由支持Espressif以及所有…

IDEA的实用快捷键大全

目录 1.常规快捷键 1.1通用类 1.2注释类 1.3操作类 1.4展开与关闭 2.智能补全类快捷键 3.程序结构类快捷键 4.统一操作快捷键 1.常规快捷键 1.1通用类 像 Ctrl C 复制&#xff0c; Ctrl V 粘贴&#xff0c; Ctrl S保存文件&#xff0c; Ctrl X剪切&#xff0c;这种…

HCIP 打破BGP水平分割-反射器、联邦

打破IBGP的水平分割的条件 IBGP水平分割---避免IBGP环路---从一个IBGP邻居处学习到的路由条目不能传递给本地的其他IBGP邻居&#xff1b; 因为BGP可以非直连建邻&#xff0c;故正常一台运行了BGP协议的路由器&#xff0c;均存在EBGP邻居&#xff0c;需要从其他AS学习路由条目…

MySQL数据库如何实现AX规范

本文我们来讨论 MySQL 的 XA 规范有哪些应用相关的内容。 MySQL 为我们提供了分布式事务解决方案&#xff0c;在前面的内容中 聊一聊分布式事务的解决方案 提到过 binlog 的同步&#xff0c;其实是 MySQL XA 规范的一个应用&#xff0c;那么 XA 规范是如何定义的&#xff0c;具…

2023牛客暑期多校训练营4

A.Bobo String Construction s取全0串或者全1串,至少有一者满足题述条件 大致感受一下 随便举几个例子: t s t 0000|0000|0000 s为全0不符合,但s为全1符合 1001|00|1001 s为全0不符合,但s为全1符合 101|000000|101 s为全0或为全1均符合 所以只需判断全0串或者全1串哪个符合题述…

redis原理 3:未雨绸缪 —— 持久化

redis原理 3&#xff1a;未雨绸缪 —— 持久化 Redis 的数据全部在内存里&#xff0c;如果突然宕机&#xff0c;数据就会全部丢失&#xff0c;因此必须有一种机制来保证 Redis 的数据不会因为故障而丢失&#xff0c;这种机制就是 Redis 的持久化机制。 Redis 的持久化机制有两种…

超越年龄限制:保持体能与积极心态的重要性(AI)

机器人和人工智能&#xff0c;没有年龄限制&#xff0c;并且越来越强&#xff0c;代表了最先进的生产力方向。 AI&#xff1a; 机器人和人工智能的发展代表了最先进生产力的方向&#xff0c;它们可以帮助人们更高效地完成各种任务&#xff0c;从而推动经济和社会的发展。机器人…

SpringDataJPA框架使用笔记

SpringDataJPA框架使用笔记 什么是JPA jpa概念 JPA是Java中用于实现对象关系映射ORM的API标准&#xff0c; JPA提供了一种将JAVA对象映射到关系数据库的方式&#xff0c; 使开发人员可以使用面向对象的方式操作数据库&#xff0c;而不需要编写繁琐的SQL语句。 jpa中的一些概…