从一个简单的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;
}
- 标题一
- 标题二
- 标题三
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学堂