css自学框架之选项卡

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

一、参数

属性	默认值	描述
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] || {};
		// 如果第一个参数是布尔值，第二个参数是才是target
		if (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;
	};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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

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";
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

三、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;}
1
2
3
4
5

这段代码同样需要加入我们的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

相关阅读:
RK3568 GPIO 按键事件响应
 nginx 教程
 QT+Opencv+MVS+paddleOCR开发环境配置（完整版）
常见的无线网络结构有哪些
 HMM隐马尔可夫模型
 最新暴力破解漏洞技术详解
 CTFSHOW框架复现篇
 AP2005SPER 低噪声4.5A升压电流模式PWM转换器最高可达9V 适用于升压5V/9V 大电流
 技术干货分享：Kvaser Leaf的 D-SUB 9连接器DB9接头的引脚定义图，另附kvaser的多款怎么选型？
探索Selenium：通过JavaScript增强UI测试效率和效果
原文地址：https://blog.csdn.net/zhaoyang314/article/details/133548103