切换属性 html5,Tab切换效果[系列] - 利用自定义属性实现Tab切换

从一个简单的Tab切换开始——利用“对象的属性”

HTML5学堂：为何要利用对象的属性进行Tab切换的简化呢？在前面两种效果的书写当中，我们都利用到了闭包的概念，但是我们都知道，闭包是让函数能够处于持续性的被引用状态，从而不能释放空间，闭包的滥用会导致内存泄露。此时我们利用对象的属性配合索引值这种方式来简化Tab切换效果。

利用对象的属性简化Tab切换

基本原理：

在每次循环的时候，都为相应数组元素添加一个索引值tabTits[i].index，这个属性是我们自己的自定义属性。在点击之后，利用this找到被点击的标题元素，然后获取到原来存储到这个元素(对象)身上的index属性。

核心代码：

var tab = document.getElementById('tab'),

tabTits = document.getElementById('tabTit').children,

tabCons = document.getElementById('tabCon').children,

len = tabTits.length;

for (var i = 0; i < len; i++) {

// 关键在于此处，为相应数组元素添加一个索引值属性

tabTits[i].index = i;

tabTits[i].onclick = function(){

for (var i = 0; i < len; i++) {

tabTits[i].className = '';

tabCons[i].className = '';

};

// 此处利用this找到被点击的标题元素，然后获取到原来存储到这个元素(对象)身上的index属性

tabTits[this.index].className = 'select';

tabCons[this.index].className = 'show';

}

};

全代码：

Tab-独行冰海-HTML5学堂

*{margin: 0;padding: 0;}

.tab{

width: 375px;

margin: 25px auto;

}

.tabTit li{

float: left;

width: 123px;

height: 38px;

border: 1px solid #00f;

text-align: center;

background: #ccf;

line-height: 38px;

list-style: none;

}

.tabTit li:hover{

background: #aaf;

cursor: hand;

cursor: pointer;

}

.tabTit .select{

background: #99f;

}

.tabCon div{

width: 373px;

height: 400px;

border: 1px solid #00f;

border-top: none;

display: none;

}

.tabCon .show{

display: block;

}

• 标题一
• 标题二
• 标题三

HTML5学堂 - 独行冰海

欢迎光临

一切都从Tab开始

var tab = document.getElementById('tab'),

tabTits = document.getElementById('tabTit').children,

tabCons = document.getElementById('tabCon').children,

len = tabTits.length;

for (var i = 0; i < len; i++) {

// 关键在于此处，为相应数组元素添加一个索引值属性

tabTits[i].index = i;

tabTits[i].onclick = function(){

for (var i = 0; i < len; i++) {

tabTits[i].className = '';

tabCons[i].className = '';

};

// 此处利用this找到被点击的标题元素，然后获取到原来存储到这个元素(对象)身上的index属性

tabTits[this.index].className = 'select';

tabCons[this.index].className = 'show';

}

};

欢迎沟通交流~HTML5学堂

从一个简单的Tab切换开始——封装函数，提高复用性

当我们能够实现基本功能之后，作为一个“懒人”，自然而然的想到的应该是：“如何我以后再去书写Tab的时候能够不再重新书写代码？如何提高我的代码的重用性/复用性？”

提到复用性/重用性，自然而然是“功能封装”，利用参数的传递进行控制。所以我们如此修改代码：

function tab(titId, conId, titClass, conClass){

var tabTits = document.getElementById(titId).children,

tabCons = document.getElementById(conId).children,

len = tabTits.length;

for (var i = 0; i < len; i++) {

// 关键在于此处，为相应数组元素添加一个索引值属性

tabTits[i].index = i;

tabTits[i].onclick = function(){

for (var i = 0; i < len; i++) {

tabTits[i].className = '';

tabCons[i].className = '';

};

// 此处利用this找到被点击的标题元素，然后获取到原来存储到这个元素(对象)身上的index属性

tabTits[this.index].className = titClass;

tabCons[this.index].className = conClass;

}

}

}

tab('tabTit','tabCon','select','show');

欢迎沟通交流~HTML5学堂