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

css自学框架之选项卡

news 2025/7/3 16:30:53

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

一、参数

属性默认值描述
tabBar.myth-tab-header span鼠标触发区域
tabCon.myth-tab-content主体区域
classNamecurrent切换时追加的样式
tabEventclick触发事件，可以换成mousemove
index0默认第一个为打开，默认当前状态索引（从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自学框架之选项卡

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JVM篇---第九篇

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

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

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

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

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

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

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

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

GPT系列论文解读：GPT-3

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

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

神经网络中的知识蒸馏

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

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

jmeter利用自身代理录制脚本

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

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

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

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

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

获取泛型的类型

示例一&#xff1a;获取父类的泛型的类型 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在进行打包时&#xff0c;会解析打包的Python文件&#xff0c;自动寻找py源文件的依赖模块。但是Pyinstaller解析模块时可能会遗漏某些模块&#xff0c;这个时候就会报错&#xff1a;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 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 机器学习股票大数据量化分析与预测系统 该项目较为新颖&am…...

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

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

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

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

Java获取汉字首字母

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

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

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

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

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

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

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

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

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/7/1 23:49:53

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/6/22 9:08:50

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/7/2 13:51:13

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/6/26 10:09:40

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/6/27 0:03:18

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/7/1 3:39:26

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/6/16 23:14:43

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2025/7/1 6:29:09

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2025/7/2 12:36:00

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2025/7/3 0:28:00