js封装tab标签页实例分享
更新时间:2016年12月19日 12:05:03 作者:wxwx123
本篇文章主要分享了js封装tab标签页的示例代码,具有很好的参考价值,需要的朋友一起来看下吧
话不多说,请看代码
<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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章
ECMAScript中var let const常见问题及区别详解
这篇文章主要为大家介绍了ECMAScript中var let const常见问题及区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-02-02js实现base64、url和blob之间相互转换的三种方式
Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式,需要的朋友可以参考下2023-04-04JavaScript 使用 splice 方法删除数组元素可能导致的问题分析
这篇文章主要介绍了JavaScript 使用 splice 方法删除数组元素可能导致的问题分析,当在 JavaScript 中从数组中删除元素时,使用 splice 方法时需要谨慎,本文给大家详细讲解,需要的朋友可以参考下2023-04-04javascript数字格式化通用类 accounting.js使用
accounting.js 是一个非常小的JavaScript方法库用于对数字,金额和货币进行格式化。并提供可选的Excel风格列渲染。它没有依赖任何JS框架。货币符号等可以按需求进行定制2012-08-08javascript字符串拆分成单个字符相加和不超过10,求最终值
javascript字符串拆分成单个字符相加和不超过10,求最终值2008-09-09JavaScript async&await方法中的异常处理方案
在 async/await 方法中,可以使用 try-catch 块来处理异常,通过使用 try-catch,可以捕获异步操作中抛出的异常,并在 catch 块中进行适当的处理,本文给大家详细介绍了async&await方法中异常如何处理,需要的朋友可以参考下2023-08-08
最新评论