js封装tab标签页实例分享
2016-12-19 12:05
676 查看
话不多说,请看代码
<html> <head> <title></title> <meta charset="UTF-8"> <style> *{ padding:0; margin:0;} .block{ display:block;} .none{ display:none;} #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;} #tab1,#tab2{ list-style:none;} #tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;} #tab2 li:hover{ background:#CCC;} #tab1 li.on,#tab2 li.on{ background:#9C3;} #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;} </style> </head> <body> <div id="wrap"> <ul id="tab1"> <li class="on">第一项</li> <li>第二项</li> <li>第三项</li> </ul> <br clear="all" /> <div class="block">第一部分</div> <div class="none">第二部分</div> <div class="none">第三部分</div> </div> <div id="wraps"> <ul id="tab2"> <li class="on">第一项</li> <li>第二项</li> <li>第三项</li> </ul> <br clear="all" /> <div class="block">第一部分</div> <div class="none">第二部分</div> <div class="none">第三部分</div> </div> <script type="text/javascript"> tab("wrap","tab1","mouseover") tab("wraps","tab2"); function tab(wrap,navul,eve){ //tab效果封装,目前只有两种变换方式,一种为点击事件click(也是默认事件),另外一种为鼠标移过事件mouseover var divs=document.getElementById(wrap).getElementsByTagName("div"); var lis=document.getElementById(navul).getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].indx=i; if(eve=="click" || eve==null){ lis[i].onclick=function(){ for(i=0;i<lis.length;i++){ lis[i].className=""; divs[i].className="none"; this.className="on"; divs[this.indx].className="block"; } } }else if(eve=="mouseover"){ lis[i].onmouseover=function(){ for(i=0;i<lis.length;i++){ lis[i].className=""; divs[i].className="none"; this.className="on"; divs[this.indx].className="block"; } } } } } </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
- js与jquery分别实现tab标签页功能的方法
- 最简单纯JavaScript实现Tab标签页切换的方式(推荐)
- 纯css+js写的一个简单的tab标签页带样式
- js(JavaScript)实现TAB标签切换效果的简单实例
- js实现点击切换TAB标签实例
- 简单纯js实现点击切换TAB标签实例
- js实现的tab标签切换效果代码分享
- JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
- javascript实现不同颜色Tab标签切换效果
- javascript动态添加删除tabs标签的方法
- 基于JavaScript实现TAB标签效果
- JavaScript实现的原生态Tab标签页功能【兼容IE6】
相关文章推荐
- 简单的JS运动封装实例---侧栏分享到
- vue.js移动端tab组件的封装实践实例
- 【分享】 封装js操作textarea 方法集合(兼容很好)。
- 分享利用JS实现两个select标签中内容更换的小实例
- js获取url参数代码实例分享(JS操作URL)
- js封装tab选项卡--半完成,纯代码框架(原创)
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- JS中封装解析xml的代码,以及实例应用
- javascript分页代码实例分享(js分页)
- js获取url参数代码实例分享(JS操作URL)
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- js+css实例超漂亮tab切换选项卡代码
- html css js 实现Tab标签页示例代码
- node.js和socket.io纯js实现的即时通讯实例分享
- javascript分页代码实例分享(js分页)
- JS实例TAB切换
- webview和js的交互封装源码分享
- js实现瀑布流的一种简单方法实例分享
- 纯css+js写的一个简单的tab标签页带样式
- js实现弹窗插件功能实例代码分享