js封装tab标签页
Posted 以茜为贵wx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js封装tab标签页相关的知识，希望对你有一定的参考价值。
1 <html> 2 <head> 3 <title></title> 4 <meta charset="UTF-8"> 5 <style> 6 *{ padding:0; margin:0;} 7 .block{ display:block;} 8 .none{ display:none;} 9 #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;} 10 #tab1,#tab2{ list-style:none;} 11 #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;} 12 #tab2 li:hover{ background:#CCC;} 13 #tab1 li.on,#tab2 li.on{ background:#9C3;} 14 #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;} 15 16 </style> 17 </head> 18 <body> 19 20 <div id="wrap"> 21 <ul id="tab1"> 22 <li class="on">第一项</li> 23 <li>第二项</li> 24 <li>第三项</li> 25 </ul> 26 <br clear="all" /> 27 <div class="block">第一部分</div> 28 <div class="none">第二部分</div> 29 <div class="none">第三部分</div> 30 </div> 31 <div id="wraps"> 32 <ul id="tab2"> 33 <li class="on">第一项</li> 34 <li>第二项</li> 35 <li>第三项</li> 36 </ul> 37 <br clear="all" /> 38 <div class="block">第一部分</div> 39 <div class="none">第二部分</div> 40 <div class="none">第三部分</div> 41 </div> 42 43 <script type="text/javascript"> 44 tab("wrap","tab1","mouseover") 45 tab("wraps","tab2"); 46 function tab(wrap,navul,eve){ 47 //tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover 48 var divs=document.getElementById(wrap).getElementsByTagName("div"); 49 var lis=document.getElementById(navul).getElementsByTagName("li"); 50 for(var i=0;i<lis.length;i++){ 51 lis[i].indx=i; 52 if(eve=="click" || eve==null){ 53 lis[i].onclick=function(){ 54 for(i=0;i<lis.length;i++){ 55 56 lis[i].className=""; 57 divs[i].className="none"; 58 59 this.className="on"; 60 divs[this.indx].className="block"; 61 } 62 } 63 }else if(eve=="mouseover"){ 64 lis[i].onmouseover=function(){ 65 for(i=0;i<lis.length;i++){ 66 lis[i].className=""; 67 divs[i].className="none"; 68 69 this.className="on"; 70 divs[this.indx].className="block"; 71 } 72 } 73 } 74 } 75 } 76 </script> 77 </body> 78 </html>
以上是关于js封装tab标签页的主要内容，如果未能解决你的问题，请参考以下文章
标签页（tab）切换的原生js,jquery和bootstrap实现
前端Vue项目：旅游App-city：标签页Tabs动态数据：网络请求axios与request数据管理store与pinia各种封装