当前位置：首页 > news >正文

css自学框架之选项卡

news 来源：原创 2025/4/20 8:47:50

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

一、参数

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