css自学框架之选项卡

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

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

一、参数

属性	默认值	描述
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;
	};

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

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>