网站下载视频的方法,成都网站制作长沙,深圳软件开发公司在哪里,seo按天计费软件这一节我们学习切换选项卡#xff0c;两种切换方式#xff0c;一种是单击切换选项#xff0c;一种是鼠标滑动切换#xff0c;通过参数来控制#xff0c;切换方法。
一、参数
属性默认值描述tabBar.myth-tab-header span鼠标触发区域tabCon.myth-tab-content主体区域cla…这一节我们学习切换选项卡两种切换方式一种是单击切换选项一种是鼠标滑动切换通过参数来控制切换方法。
一、参数
属性默认值描述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] || {};// 如果第一个参数是布尔值第二个参数是才是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.tabEventmousemove){headspan[i].onmouseoverfunction(){ 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.tabEventclick){headspan[i].onclickfunction(){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
htmlheadmeta charsetutf-8title/titlelink relstylesheet hrefcss/myth.cssscript srcjs/myth.js/scriptmeta nameviewport contentwidthdevice-width, maximum-scale1, initial-scale1 //headbodydiv classmythBox middiv classmyth-tab idmytablediv classmyth-tab-headerspan roletab选项卡一/spanspan roletab选项卡二/spanspan roletab自适应宽度/span/divdiv classmyth-tab-content内容一/divdiv classmyth-tab-content内容二/divdiv classmyth-tab-content内容三/div/div/divscriptmyth(#mytable).mythTable({ tabEvent:mousemove,index:0});/script/body
/htmlok这样选项卡就实现了需要源代码的请单击下载。
