主页 > 互联网  > 

css自学框架之选项卡

css自学框架之选项卡

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

一、参数 属性默认值描述tabBar.myth-tab-header span鼠标触发区域tabCon.myth-tab-content主体区域classNamecurrent切换时追加的样式tabEventclick触发事件，可以换成mousemoveindex0默认第一个为打开，默认当前状态索引（从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自学框架之选项卡由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“css自学框架之选项卡”

上一篇
SQL_ERROR_INFO:“Duplicateentry

下一篇
OpenCV实现视频的追踪（meanshift、Camshi

推荐文章