javascript 实现tab菜单切换
2015-06-08 08:50
477 查看
<!DOCTYPE html> <html> <head> <title></title> </head> <body style="text-align:center;margin-top:150px;"> <div class="tabs" id="tabs"> <span style="color:red;" >tab1</span> <span>tab2</span> <span>tab3</span> </div> <div id="tabs-content"> <p style="">tab1</p> <p style="display:none;">tab2</p> <p style="display:none;">tab3</p> </div> <script type="text/javascript"> window.onload = function () { var tabs = document.getElementById("tabs").getElementsByTagName("span"); for (var i = 0 ; i < tabs.length; i ++) { tabs[i].index = i; tabs[i].onclick = function () { //下一行this.index,请勿直接用i 或者tabs[i] 代替。 这跟javascript的异步操作有关。感兴趣的可以去了解下! showHide(this.index, tabs); } }; }; function showHide (index, tabs) { var obj = document.getElementById('tabs-content'); var p = obj.getElementsByTagName('p'); for (var i = 0; i < p.length; i ++) { if (i == index) { tabs[i].style.color = "red"; p[i].style.display = "block"; } else { tabs[i].style.color = "black"; p[i].style.display = "none"; } } } </script> </body> </html>
相关文章推荐
- 上传图片显示预览js代码
- javascript理解闭包概念
- Javascript(函数)整理
- 由几道JS笔试题引发的知识点探究二——强制类型转换
- JavaScript中的anchor()方法使用详解
- 详解JavaScript中的blink()方法的使用
- JavaScript中的bold()方法使用详解
- 简介JavaScript中fixed()方法的使用
- 在JavaScript中处理字符串之fontcolor()方法的使用
- js禁止页面刷新与后退的方法
- js控制网页前进和后退的方法
- JavaScript中的fontsize()方法使用详解
- 简介JavaScript中的italics()方法的使用
- js去除浏览器默认底图的方法
- javaScript中push函数用法实例分析
- javaScript中slice函数用法实例分析
- 在JavaScript中处理字符串之link()方法的使用
- JavaScript中的small()方法使用详解
- 简介JavaScript中strike()方法的使用
- 简介JavaScript中的sub()方法的使用