Tab标签js切换高效率写法

原来的传统写法：

function tabit(id,cid) {  

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

     gi(["tab"+i]).className = "taboff";  

     gi(["ctab"+i]).style.display = "none";  

  }  

  gi(id).className="tabon";  

  gi(cid).style.display="block";  

}

原理：用for循环将全部的tab置为不显示，然后循环结束后，把指定的那个tab置前即可。

这样做效率极低，另外受tab个数限制。

我初次接触这种切换问题的时候，就提出一种临时存储记忆法，可以比这种传统循环的算法效率高很多，实现起来也非常简单：

var lastTab; //临时存储上次时的tab ID值  

function tabit(cid) {  

//如果上次有存储值，且和本次请求切换的是同一个，那么直接提前结束  

if( lastTab && lastTab == cid)  

return;  

//否则，改变上次的tab状态为隐藏状态，并且置换本次请求的tab为当前状态  

/*这里要注意考虑第一次触发这个函数的情况，因为这个时候lastTab是undefined，所以直接查找id对应的元素肯定会报js错误的*/  

if( lastTab) {  

    gi(lastTab).className = "taboff";  

    gi(lastTab).style.display="none";  

}  

gi(cid).className="tabon";  

gi(cid).style.display="block";  

//最后将本次的tab记录下来以备下次切换使用  

lastTab = cid;  

}  

//根据id获取对应的元素对象  

function gi(id) {  

return document.getElementById(id);  

}

我的这个版本的算法原理是：用一个变量临时存储最后一次请求切换的Tab id,这个时候，如果有下一次的切换请求，那么就跟上次请求的记录进行对比，如果相同，则不进行切换，直接结束，否则进行切换本次的tab状态和上次的tab状态即可。

这样一来没有做重复无意义的工作，二来效率高，且不受tab个数的限制，就算有10000个tab进行切换，处理的速度还是跟处理2个tab切换的速度一样的高。

秒客网

Tab标签js切换高效率写法

相关文章