css自学框架之选项卡

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

一、参数

属性默认值描述
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这样选项卡就实现了,需要源代码的请单击下载。

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

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

相关文章

python模拟表格任意输入位置

在表格里输入数值&#xff0c;要任意位置&#xff0c;我找到了好方法&#xff1a; input输入 1. 行 2. 列输入&#xff1a;1 excel每行输入文字input输入位置 3.2 表示输入位置在&#xff1a;3行个列是要实现一个类似于 Excel 表格的输入功能&#xff0c;并且希望能够指定输入…

概率密度函数,概率分布函数

概率密度函数&#xff1a;描述信号的取值在某个确定的取值点附近的概率的函数&#xff1b;概率分布函数的导数。 以幅值大小为横坐标&#xff0c;以每个幅值间隔内出现的概率为纵坐标进行统计分析。反映了信号落在不同幅值强度区域内的概率情况。 直方图&#xff1a;对每个幅…

智能合约漏洞,BEVO 代币损失 4.5 万美元攻击事件分析

智能合约漏洞&#xff0c;BEVO 代币损失 4.5 万美元攻击事件分析 一、事件背景 北京时间 2023 年 1 月 31 日&#xff0c;在 twitter 上看到这样一条消息&#xff1a; BEVO 代币被攻击&#xff0c;总共损失 45000 美元&#xff0c;导致 BEVO 代币的价格下跌了 99%。 有趣的是…

华为云云耀云服务器L实例评测|云耀云服务器L实例部署ZFile在线网盘服务

华为云云耀云服务器L实例评测&#xff5c;云耀云服务器L实例部署ZFile在线网盘服务 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点 二、ZFile介绍2.1 ZFile简介2.2 ZFile特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、购买华为云…

【Verilog 教程】6.6Verilog 仿真激励

关键词&#xff1a;testbench&#xff0c;仿真&#xff0c;文件读写 Verilog 代码设计完成后&#xff0c;还需要进行重要的步骤&#xff0c;即逻辑功能仿真。仿真激励文件称之为 testbench&#xff0c;放在各设计模块的顶层&#xff0c;以便对模块进行系统性的例化调用进行仿真…

word已排序好的参考文献,插入新的参考文献,序号更新

原排序好的文献序号。 现在在3号后面插入一个新文献。4&#xff0c;5号应该成为5&#xff0c;6 这时在3号后面&#xff0c;回车&#xff0c;就会自动的增长。如下图&#xff1a; 但是如果手滑&#xff0c;把[4]删除了如何排序&#xff1f;&#xff1f; 如下图&#xff1a; …

代码随想录 Day - 54|#392 判断子序列|#115 不同的子序列

清单 ● 392.判断子序列 ● 115.不同的子序列 LeetCode #392 判断子序列 1. 题目 给定字符串 s 和 t&#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&a…

怎么将本地代码文件夹通过Git 命令上传到启智平台仓库

在本地创建一个与启智平台仓库同样名字的文件夹 然后在本地文件夹右键–>选择Git Bash Here,就会打开Git命令窗口 初始化本地仓库 git init将项目文件添加到Git git add .提交更改&#xff1a; 使用以下命令提交您的更改&#xff0c;并为提交添加一条描述性的消息&#…

【Java-LangChain:面向开发者的提示工程-5】推断

第五章 推断 推断任务可以看作是模型接收文本作为输入&#xff0c;并执行某种分析的过程。其中涉及提取标签、提取实体、理解文本情感等等。如果你想要从一段文本中提取正面或负面情感&#xff0c;在传统的机器学习工作流程中&#xff0c;需要收集标签数据集、训练模型、确定如…

创建线程池

如何创建线程池及处理相应任务 目录 如何创建线程池及处理相应任务线程池定义解决的问题(需求)工作原理实现线程池创建示意图重要构造器创建线程池(ExecutorService)线程池任务处理常用API处理Runnable任务处理Callable任务 使用工具类(Executors)创建线程池常用API应用案例 拓…

极大似然估计概念的理解——统计学习方法

目录 1.最大似然估计的概念的理解1 2.最大似然估计的概念的理解2 3.最大似然估计的概念的理解3 4.例子 1.最大似然估计的概念的理解1 最大似然估计是一种概率论在统计学上的概念&#xff0c;是参数估计的一种方法。给定观测数据来评估模型参数。也就是模型已知&#xff0c;参…

【C语言】21-指针-3

目录 1. 指针数组1.1 什么是指针数组1.2 如何定义指针数组1.3 如何使用指针数组2. 多重指针2.1 二重指针的定义2.2 二重指针的初始化与赋值2.3 二重指针的使用3. 指针常量、常量指针、指向常量的常指针3.1 概念3.2 const pointer3.3 pointer to a constant3.3.1 (pointer to a …

浅谈泛型擦除

文章目录 泛型擦除(1)转换泛型表达式(2)转换泛型方法泛型擦除带来的问题 泛型擦除 在编码阶段使用泛型时加上的类型参数&#xff0c;会被编译器在编译阶段去掉&#xff0c;这个过程叫做泛型擦除。 泛型主要用于编译阶段。在编译后生成的Java字节码文件中不包含泛型中的类型信息…

芯驰D9评测(2)--系统环境配置连接

linux开发板的软件开发三件套&#xff1a; 建立连接-->建立交叉编译环境-->建立驱动开发环境。 如果我们不涉及镜像的深度定制&#xff0c;只是平台化应用的话 1. 建立串口连接 查看手册&#xff0c; 获取接口定义说明&#xff1a; 板载一共两个端子&#xff0c;三个…

2023年山东省安全员C证证考试题库及山东省安全员C证试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年山东省安全员C证证考试题库及山东省安全员C证试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大…

Flutter笔记:手写并发布一个人机滑动验证码插件

Flutter笔记 手写一个人机滑块验证码 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/133529459 写 Flut…

备忘录:Docker基础操作与常用命令

文章目录 Docker基础操作1.1 Docker在线安装1.1.1 安装基础软件包1.1.2 安装docker主程序1.1.2.1 设置国内源1.1.2.2 安装docker 1.2 Docker离线安装1.2.1 下载离线安装包1.2.2 安装docker依赖包以及docker 1.3 设置自启动并启动dokcer1.4 安装docker-compose1.4.1 命令行下载文…

解决nvm切换node版本失败的终极办法-秒杀网上99%的水文

nvm是一款强大的node多版本管理器&#xff0c;可以轻易选择你需要的node版本&#xff0c;这对win7平台简直就是超好的福音&#xff1a;可以突破node 14.15以上的安装限制。 但是nvm安装有一个巨大的坑点&#xff1a;nvm use 版本号以后&#xff0c;并没有生效&#xff0c;nvm …

uni-app:js修改元素样式(宽度、外边距)

效果 代码 1、在<view>元素上添加一个ref属性&#xff0c;用于在JavaScript代码中获取对该元素的引用&#xff1a;<view ref"myView" id"mybox"></view> 2、获取元素引用 &#xff1a;const viewElement this.$refs.myView.$el; 3、修改…

从0开始python学习-28.selenium 需要图片验证的登录

url https://test.com/login driver.get(url) # 获取登录页面需要输入账号密码进行模拟登录操作 user driver.find_element(By.XPATH,//*[id"login"]/div[2]/div/form[2]/div[2]/div/div/input).send_keys(username) pwd driver.find_element(By.XPATH,//*[id&qu…