js选项卡制作

来源：互联网发布：淘宝搞笑收货人编辑：程序博客网时间：2024/06/08 04:03

使用原生 js制作的选项卡

html部分

<div id="tabCon">  <span style="white-space:pre"></span><ul>     <li id="tab_1" class="on" data-num="tab_1">TAB 1</li>      <li id="tab_2" data-num="tab_2">TAB 2</li>      <li id="tab_3" data-num="tab_3">TAB 3</li>     </ul>  </div>  <div id="textCon">    <div id="tex_1" style='display:block;'>      <p>1xfhxjfhfhfjhfjh</p>    </div>    <div id="tex_2" style='display:none;'>      <p>2kmp;,lklkniogujhv</p>    </div>    <div id="tex_3" style='display:none;'>      <p>3nk.lioxhffxrthf</p>    </div>  </div>

css部分

li,ul,ol{list-style-type: none;}  #tabCon{    width: 300px;    height: 30px;  }  #tabCon li{    margin-top: 3px;    float: left;    width: 50px;    height: 25px;    color: #999;    border:1px solid #f00;    text-align: center;    margin-right: 20px;    line-height: 30px;    cursor: pointer;  }  #tabCon li:hover{    background: #ccc;  }  #tabCon li.on{    background: #ccc;  }  #textCon{    width: 500px;    height: 400px;    background: #f9f9f9;    border:1px solid #000;    margin-left: 40px;    overflow: hidden;  }  #textCon>div{    width: 500px;    height: 400px;  }

js部分

var tabCon=document.getElementById('tabCon');      var lis=tabCon.getElementsByTagName('li');      var textCon=document.getElementById("textCon");      var texs=textCon.getElementsByTagName("div");      for(var i=0;i<lis.length;i++){        lis[i].onclick=function(){          for(var j=0;j<texs.length;j++){              texs[j].style.display="none";              lis[j].className=" ";           }           var liId=this.getAttribute("id");           var num=liId.split("_");           var divs=document.getElementById("tex_"+num[1]);           divs.style.display="block";          this.className="on";        }      }

结果展示

0 0