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] || {};// 如果第一个参数是布尔值，第二个参数是才是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>