css自学框架之选项卡

这一节我们学习切换选项卡,两种切换方式,一种是单击切换选项,一种是鼠标滑动切换,通过参数来控制,切换方法。
css自学框架之选项卡_第1张图片

一、参数

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

你可能感兴趣的:(css,JavaScript,css,前端,javascript,html)