js选项卡
2015-06-08 13:21
555 查看
选项卡就是按钮与卡片绑定,给按钮添加事件,当点击这个按钮时,相应的卡片显示,其他的都不显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选项卡</title> <style> #div1 .action{background:#FF0;} #div1 div{width:200px; height:200px; background:#0F0; border:1px solid #000; display:none;} </style> <script> window.onload=function (){ var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsByTagName('input');//得到按钮的集合 var aDiv=oDiv.getElementsByTagName('div');//得到div的集合 for(var i=0;i<aBtn.length;i++){ aBtn[i].index=i;//给按钮添加角标属性 aBtn[i].onclick=function (){//用for循环给每个按钮添加事件 for(var i=0;i<aBtn.length;i++){//将所有按钮的class取消,全部不显示 aBtn[i].className=''; aDiv[i].style.display='none'; } this.setAttribute('class','action');//按哪个按钮,就给哪个按钮添加class属性 aDiv[this.index].style.display='block';//相应的div框显示 }; } } </script> </head> <body> <div id="div1" > <input class="action" type="button" value="教育"/> <input type="button" value="出国"/> <input type="button" value="培训"/> <input type="button" value="招生"/> <div style="display:block;">这是教育国选项卡</div><!--给第一个标签添加行间样式是为了让初始化状态中这个div显示,其他的都不显示--> <div>这是出国选项卡</div> <div>这是培训选项卡</div> <div>这是招生选项卡</div> </div> </body> </html>
相关文章推荐
- 简单的JavaScript组件化实现
- EntityFramework Model有外键时,Json提示循环引用 解决方法
- JS脚本实现用户登录页面
- 详解JavaScript中的forEach()方法的使用
- 详解JavaScript中的every()方法
- JSP (2)内置对象
- js发送post请求下载文件
- js中的整型都是用double存储的,有时候不精确,如,
- 理解并掌握 JavaScript 中 this 的用法
- JS产生随机数的几个用法!
- 简介JavaScript中的sub()方法的使用
- jsp 中useBean type与class的区别
- JS对URL字符串进行编码/解码分析
- 十个JavaScript中易犯的小错误,你中了几枪?
- 简介JavaScript中strike()方法的使用
- JavaScript中的small()方法使用详解
- 在JavaScript中处理字符串之link()方法的使用
- javaScript中slice函数用法实例分析
- Javascript-稳妥构造函数模式
- javaScript中push函数用法实例分析