这一节我们学习切换选项卡，两种切换方式，一种是单击切换选项，一种是鼠标滑动切换，通过参数来控制，切换方法。
一、参数
| 属性 | 默认值 | 描述 |
|---|---|---|
| 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>
ok这样选项卡就实现了，需要源代码的请单击下载。
