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

css自学框架之选项卡

news 文章来源：https://blog.csdn.net/zhaoyang314/article/details/133548103 2025/1/15 18:23:19

这一节我们学习切换选项卡，两种切换方式，一种是单击切换选项，一种是鼠标滑动切换，通过参数来控制，切换方法。
请添加图片描述

一、参数

属性	默认值	描述
tabBar	.myth-tab-header span	鼠标触发区域
tabCon	.myth-tab-content	主体区域
className	current	切换时追加的样式
tabEvent	click	触发事件，可以换成mousemove
index	0	默认第一个为打开，默认当前状态索引（从0开始）

二、Js代码

参数合并代码。

function extend() {// 默认不进行深拷贝var deep = false;var name, options, src, copy;var length = arguments.length;// 记录要复制的对象的下标var i = 1;// 第一个参数不传布尔值的情况下，target默认是第一个参数var target = arguments[0] || {};// 如果第一个参数是布尔值，第二个参数是才是targetif (typeof target == 'boolean') {deep = target;target = arguments[i] || {};i++;}// 如果target不是对象，我们是无法进行复制的，所以设为{}if (typeof target !== 'object') {target = {}}// 循环遍历要复制的对象们for (; i < length; i++) {// 获取当前对象options = arguments[i];// 要求不能为空 避免extend(a,,b)这种情况if (options != null) {for (name in options) {// 目标属性值src = target[name];// 要复制的对象的属性值copy = options[name];if (deep && copy && typeof copy == 'object') {// 递归调用target[name] = extend(deep, src, copy);} else if (copy !== undefined) {target[name] = copy;}}}}return target;};

功能时限代码。这段代码还是需要加到我们以前的基础框架中。

mythTable: function(options, callback) {var defaults = {tabBar: '.myth-tab-header span',tabCon: ".myth-tab-content",className: "current",tabEvent: "click",index: 0,}var options = extend(defaults, options);var that = this;var headspan = that.dom[0].querySelectorAll(options.tabBar);var contentTable = that.dom[0].querySelectorAll(options.tabCon);			for (var i = 0; i < headspan.length; i++) {	if(options.tabEvent=="mousemove"){headspan[i].onmouseover=function(){					for (var i = 0; i < headspan.length; i++) {						if(headspan[i]==this){headspan[i].classList.add(options.className)contentTable[i].style.display = "block";}else{headspan[i].classList.remove(options.className)contentTable[i].style.display = "none";}}}}else if(options.tabEvent=="click"){headspan[i].onclick=function(){for (var i = 0; i < headspan.length; i++) {						if(headspan[i]==this){headspan[i].classList.add(options.className)contentTable[i].style.display = "block";}else{headspan[i].classList.remove(options.className)contentTable[i].style.display = "none";}}}}}headspan[options.index].classList.add(options.className)contentTable[options.index].style.display = "block";}

三、css代码

/* 选项卡 */.myth-tab .myth-tab-header {border-bottom: 1px solid #e8e8e8;}.myth-tab .myth-tab-header span {cursor: pointer; display: inline-block; height: 40px;line-height: 40px;padding: 0 20px;border-bottom: solid 2px #fff;}.myth-tab .myth-tab-header span.current {border-bottom-color: #1890ff;}.myth-tab .myth-tab-content {display: none;padding-top: 20px;}

这段代码同样需要加入我们的CSS基础代码内。

四、html调用代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/myth.css"><script src="js/myth.js"></script><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" /></head><body><div class="mythBox mid"><div class="myth-tab" id="mytable"><div class="myth-tab-header"><span role="tab">选项卡一</span><span role="tab">选项卡二</span><span role="tab">自适应宽度</span></div><div class="myth-tab-content">内容一</div><div class="myth-tab-content">内容二</div><div class="myth-tab-content">内容三</div></div></div><script>myth("#mytable").mythTable({ tabEvent:"mousemove",index:0});</script></body>
</html>

ok这样选项卡就实现了，需要源代码的请单击下载。

css自学框架之选项卡

这一节我们学习切换选项卡，两种切换方式，一种是单击切换选项，一种是鼠标滑动切换，通过参数来控制，切换方法。一、参数属性默认值描述tabBar.myth-tab-header span鼠标触发区域tabCon.myth-tab-content主体区域cla…...

编程日记 2023/10/8 15:29:57

Element Plus组件库中的input组件如何点击查看按钮时不可编辑，点击编辑时可编辑使用setup

如果你正在使用 Vue 3 和 Composition API，你可以使用 setup 函数来实现 Element Plus 的 Input 组件在点击查看按钮时不可编辑，点击编辑按钮时可编辑的功能。以下是一个使用 setup 的示例代码： <template><div><el-input …...

编程日记 2023/10/8 15:28:56

小米、华为、iPhone、OPPO、vivo如何在手机让几张图拼成一张？

现在很多手机自带的相册APP已经有这个拼图功能了。华为手机的拼图打开图库，选定需要拼图的几张图片后，点击底部的【创作】，然后选择【拼图】就可以将多张图片按照自己想要的位置，组合在一起。 OPPO手机的拼图打开相册&#…...

编程日记 2023/10/8 15:26:53

物联网AI MicroPython传感器学习之 WS2812 RGB点阵灯环

学物联网，来万物简单IoT物联网！！ 一、产品简介 ws2812是一个集控制电路与发光电路于一体的智能外控LED光源。其外型与一个5050LED灯珠相同，每个元件即为一个像素点。像素点内部包含了智能数字接口数据锁存信号整形放大驱动电路&a…...

编程日记 2023/10/8 15:24:50

【GPU常见概念】GPU常见概念及分类简述

随着大模型和人工智能的爆火，大家对GPU的关注持续上升，本文简单简述下GPU经常用的概念。 GPU（图形处理器），又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备&…...

编程日记 2023/10/8 15:22:48

JVM篇---第九篇

系列文章目录文章目录系列文章目录一、什么是指针碰撞？二、什么是空闲列表三、什么是TLAB？ 一、什么是指针碰撞？ 一般情况下，JVM的对象都放在堆内存中（发生逃逸分析除外）。当类加载检查通过后&#xff0…...

编程日记 2023/10/8 15:21:47

探索 GAN 和 VAE 之外的 NLP 扩散模型

介绍扩散模型最近引起了极大的关注，特别是在自然语言处理（NLP）领域。基于通过数据扩散噪声的概念，这些模型在各种NLP任务中表现出了卓越的能力。在本文中，我们将深入研究扩散模型，了解其基本原理，并探讨实际应用、优势、计算注意事项、扩散模型在多模态数据处理中的相…...

编程日记 2023/10/8 15:20:46

发现很多人分不清 jwt session token 的区别？

1. JWT（JSON Web Token） 1.1 什么是JWT？ JWT，全称为JSON Web Token，是一种用于在网络上安全传输信息的开放标准。它的设计初衷是用于跨域通信，在不同域之间传递声明性信息。JWT是一种自包含的令牌&#x…...

编程日记 2023/10/8 15:19:44

GPT系列论文解读：GPT-3

GPT系列 GPT（Generative Pre-trained Transformer）是一系列基于Transformer架构的预训练语言模型，由OpenAI开发。以下是GPT系列的主要模型： GPT：GPT-1是于2018年发布的第一个版本，它使用了12个Transformer…...

编程日记 2023/10/8 15:18:44

神经网络中的知识蒸馏

多分类交叉熵损失函数：每个样本的标签已经给出，模型给出在三种动物上的预测概率。将全部样本都被正确预测的概率求得为0.70.50.1，也称为似然概率。优化的目标就是希望似然概率最大化。如果样本很多，概率不断连乘，就会造…...

编程日记 2023/10/8 15:15:41

jmeter利用自身代理录制脚本

在利用代理录制脚本时一定要安装java jdk，不然不能录制的。没有安装过java jdk安装jmeter后打开时会提示安装jdk，但是mac系统中直接打开提示安装jdk页面后下载的java并不是jdk（windows中没有试验过，笔者所说的基本全部指的是在ma…...

编程日记 2023/10/8 15:14:40

【漏洞复现】时空智友企业流程化管控系统 session泄露

漏洞描述时空智友企业流程化管控系统 session 泄露免责声明技术文章仅供参考，任何个人和组织使用网络应当遵守宪法法律，遵守公共秩序，尊重社会公德，不得利用网络从事危害国家安全、荣誉和利益，未经授权请勿利用…...

编程日记 2023/10/8 15:11:36

示例一：获取父类的泛型的类型 public class Emp<T, Q> {class Stu extends Emp<String, Integer> {}Testvoid fun() {final Type type Emp.class.getGenericSuperclass();final ParameterizedType parameterizedType (ParameterizedType) type;Syste…...

编程日记 2023/10/8 15:10:35

[Python进阶] Pyinstaller打包问题

5.9 Pyinstaller打包问题 5.9.1 找不到指定的模块 Pyinstaller在进行打包时，会解析打包的Python文件，自动寻找py源文件的依赖模块。但是Pyinstaller解析模块时可能会遗漏某些模块，这个时候就会报错：No Module named xxx。如果是…...

编程日记 2023/10/8 15:09:33

计算机竞赛题目：基于机器视觉opencv的手势检测手势识别算法 - 深度学习卷积神经网络 opencv python

文章目录 1 简介2 传统机器视觉的手势检测2.1 轮廓检测法2.2 算法结果2.3 整体代码实现2.3.1 算法流程 3 深度学习方法做手势识别3.1 经典的卷积神经网络3.2 YOLO系列3.3 SSD3.4 实现步骤3.4.1 数据集3.4.2 图像预处理3.4.3 构建卷积神经网络结构3.4.4 实验训练过程及结果 3.5 …...

编程日记 2023/10/8 15:08:32

竞赛选题机器学习股票大数据量化分析与预测系统 - python 竞赛选题

文章目录 0 前言1 课题背景2 实现效果UI界面设计web预测界面RSRS选股界面 3 软件架构4 工具介绍Flask框架MySQL数据库LSTM 5 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 机器学习股票大数据量化分析与预测系统该项目较为新颖&am…...

编程日记 2023/10/8 15:07:30

智慧驿站：为城市带来全新智慧公厕未来形态

随着城市发展和科技进步的不断推进，智慧公厕逐渐成为城市规划和公共设施建设的重要组成部分。而集合了创意的外观设计、全金属结构工艺、智慧公厕、自动售货、共享设备、广告大屏、小型消防站、小型医疗站，并能根据需要而灵活组合的智慧驿站成为其中重要…...

编程日记 2023/10/8 15:06:28

Java获取汉字首字母

Java获取汉字的首字母，例如：中国香港，则返回ZGXG；Tom 中国欢迎你，则返回 TOM ZGHYN，如果为英文，则返回英文的大写形式，传空字符串则什么也不返回。其中需要引用的maven依赖&#xf…...

编程日记 2023/10/8 15:05:27

基于or-tools的人员排班问题建模求解（JavaAPI）

使用Java调用or-tools实现了阿里mindopt求解器的案例（https://opt.aliyun.com/platform/case）人员排班问题。这里写目录标题人员排班问题问题描述数学建模编程求解（ortoolsJavaAPI）求解结果人员排班问题随着现在产业的发展&…...

编程日记 2023/10/8 15:04:26

设备管理团队如何做好停机维护工作_基于PreMaint设备数字化平台

在现代工业生产中，设备的正常运行对于企业的生产效率和利润至关重要。而停机维护作为设备管理的重要环节，旨在确保设备的安全性、可靠性和性能稳定。本文将介绍停机维护的概念，讨论如何计划停机维护，并重点探讨如何通过PreMaint设…...

编程日记 2023/10/8 15:03:21

c++ qt--线程（二）（第九部分）

c qt–线程（二）（第九部分） 一.线程并发 1.并发问题： 多个线程同时操作同一个资源（内存空间、文件句柄、网络句柄），可能会导致结果不一致的问题。发生的前提条件一定是多线程下…...

编程日记 2023/10/8 15:02:20

企业数据泄露不断，深信服EDR助企业构建数据“安全屋”

随着数字时代不断发展,数据泄露问题愈发严峻,个人信息安全面临着严重的威胁。近日,加拿大电信巨头加拿大贝尔(Bell Canada)对外披露了一起大规模数据泄露事件,该公司承认黑客入侵其系统,并窃取了190万个用户电子邮件地址以及约1700个用户姓名及活跃电话号码信息,相关损失无法估…...

编程日记 2023/10/8 15:01:19

单线复用iptv影响网速吗？

IPTV单线复用对网速有影响吗？这是一个比较常见的问题。如果你家的局域网是老的100M局域网LAN的路由器，走单线复用会影响你上网速度。但是如果你家的局域网是千兆网络，IPTV单线复用叠加上去的这点流量算不上什么，可以认为不占用网速…...

编程日记 2023/10/8 15:00:17

C语言中常用的字符串处理函数（strlen、strcpy、strcat、strcmp）

文章目录写在前面1. strlen1.1 函数介绍1.2 模拟实现 2. strcpy2.1 函数介绍2.2 模拟实现 3. strcat3.1 函数介绍3.2 模拟实现 4. strcmp4.1 函数介绍4.2 模拟实现写在前面本篇文章介绍了C语言中常用的字符串处理函数，包括strlen、strcpy、strcat和strcmp。文章…...

编程日记 2023/10/8 14:59:16

Suricata – 入侵检测、预防和安全工具

一、Suricata介绍 Suricata是一个功能强大、用途广泛的开源威胁检测引擎，提供入侵检测 (IDS)、入侵防御 (IPS) 和网络安全监控功能。它执行深度数据包（网络流量）检查以及模式匹配，在威胁检测中非常强大。工作流程： 主…...

编程日记 2023/10/8 14:58:15

vscode 乱码解决

windows 10 系统 vs code 编译运行和调试 C/C_vscode windows编译_雪的期许的博客-CSDN博客 VS Code默认文件编码时UTF-8，这对大多数情况是没有问题的，却偏偏对C/C有问题。如果以UTF-8编码保存C/C代码，那么只能输出英文，另外使用…...

编程日记 2023/10/8 14:57:14

SpringCloud（37）：Spring Cloud Alibaba 综合集成架构演示

Spring Cloud是一个较为全面的微服务框架集，集成了如服务注册发现、配置中心、消息总线、负载均衡、断路器、API网关等功能实现。而在网上经常会发现Spring Cloud与阿里巴巴的Dubbo进行选择对比，这样做其实不是很妥当，前者是一套较为完整的架构方案，而Dubbo只是服务治理与R…...

编程日记 2023/10/8 14:56:13

【单片机】15-AD和DA转换

1.AD转换及其相关背景知识 1.基本概念 1.什么是AD转换？ A（A，analog，模拟的，D，digital，数字的） 现实世界是模拟的，连续分布的，无法被分成有限份；…...

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

基于FPGA的I2C读写EEPROM

文章目录前言一、I2C协议1.1 I2C协议简介1.2 物理层1.3 协议层二、EEPROM2.1 型号及硬件规格2.2 各种读写时序三、状态机设计四、项目源码：五、实现效果参考资料前言本次项目所用开发板FPGA芯片型号为：EP4CE6F17C8 EEPROM芯片型号为：24L…...

编程日记 2023/10/8 14:54:11

Viva Employee Communications Communities部署方案

目录 Viva Employee Communications & Communities产品介绍 1. 沟通中心（Communications Center） 2. 新闻和公告（News and Announcements）...

编程日记 2023/10/8 14:53:10

怎么做伪静态网站/站长工具备案查询

一、题目描述输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字，例如，如果输入如下44矩阵：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1，2，3，4，8&#…...

编程日记 2025/1/15 16:25:33

wordpress第一张缩略图/处理事件seo软件

我正在使用docker-compose.yaml构建我的应用程序以进行本地开发，使用两个Dockerfiles - 一个用于app(WordPress)，另一个用于nginx。由于这是一个使用Jenkins管道构建的特定应用程序，我无法更改Dockerfiles，但我希望能够在本地测试…...

编程日记 2025/1/15 15:13:32

网站想建设子站/可以推广赚钱的软件

熟悉C的童鞋都知道，为了避免“野指针”（即指针在首次使用之前没有进行初始化）的出现，我们声明一个指针后最好马上对其进行初始化操作。如果暂时不明确该指针指向哪个变量，则需要赋予NULL值。除了NULL之外，C…...

编程日记 2025/1/15 13:53:59

企业登录/宁波seo咨询

当前正在改写一个基于早期Cocos2d-x 2.x实现的小游戏，在涉及到多线程代码时，忽然编译器提示找不到头文件pthread.h。查了一下，发现如今的3.x中不再支持pthread.h头文件，以前的2.X时代这个文件包含在$(ProjectDir)..\..\cocos2dx\p…...

编程日记 2025/1/15 11:44:49

徐州做网站费用/北京百度推广代理公司

2019独角兽企业重金招聘Python工程师标准>>> Jenkins是代码持续集成工具，Sonar则是一个代码质量管理平台。在编译代码时，可以使用SonarQube提供的sonar-maven-plugin插件执行执行sonar代码质量检查，将检查结果传给SonarQube服务器…...

编程日记 2025/1/15 11:30:35

莱州网站建设公司/电商网站对比

问题提出：M（如10亿）个int整数，只有其中N个数重复出现过，读取到内存中并将重复的整数删除。问题分析：我们肯定会先想到在计算机内存中开辟M个int整型数据数组，来one bye one读取M个int类型数组&…...

编程日记 2025/1/15 9:20:44

一、参数

二、Js代码

三、css代码

四、html调用代码

相关文章：