Tab标签js切换高效率写法
来源:互联网 发布:直播盒子源码 编辑:程序博客网 时间:2024/06/06 12:57
干咱们java web开发这一行的,一般可能都碰到过做Tab标签切换的js功能任务,我看到很多人都喜欢用循环去控制那个置为当前显示,剩下都置为隐藏,我就很奇怪,为什么一定要使用循环去做这件事呢,如果你有1000个标签,也用循环逐个搞定么?
原来的传统写法:
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切换高效率写法
- js tab标签切换
- tab标签切换js
- js(jquery) tab标签切换
- js实现切换Tab标签
- CSS+JS实现tab标签切换
- tab标签切换
- tab标签页切换
- tab标签切换
- tab标签页切换
- Tab标签页切换
- html tab标签切换
- jQuery切换tab标签
- tab标签切换
- js(JavaScript)代码实现的TAB标签切换效果
- JS实现Tab标签(选项卡)切换效果
- JS+CSS仿百度风云榜TAB标签切换效果
- TAB切换JS
- redis有序集合实现撒花逻辑
- 浅谈ASP.NET内部机制(四)
- Java桌面程序实现“单例”
- spring的循环注入,tomcat有时不报错
- word邮件合并
- Tab标签js切换高效率写法
- POJ 1977 构造矩阵乘法
- Maven入门指南
- 浅谈ASP.NET内部机制(五)
- java.sql.SQLWarning: 010SK: Database cannot set connection option SET_READONLY_FALSE.
- html5 语言标签重构布局
- jQuery 参考手册 - 效果
- 小言C#与java对json的解析区别
- dbx调试工具,下面介绍一些常用的命令