很多站长在制作模板的时候，常常会用到选项卡切换，今天，深圳企创互联就告诉大家如何用最简单的js实现选项卡切换效果，希望对站长朋友们有帮助。

  

  
    选项卡html代码

　  <dt><span class="goodat"><strong>专家简介</strong>：毕业于同济医科大学，40多年来一直从事泌尿外科临床、教学及科研工作。曾多次参加过内外国泌尿外科学会会议及交流会，多年来，在大量的男科临床实践中积累了丰富的经验，先后发表论文论文60多篇，获科技进步奖2项、科技发明奖1项，拥有1项专利。擅长泌尿系统病症的诊治以及泌尿外科疾病的腔内微创治疗，包括泌尿系结石、良性前列腺增生、膀胱肿瘤等...</dt>
                          <dt class="zjll">
                          <dd class="zjll_left"></dd>
                          <dd class="zjll_right">
                         <p class="zjry" id="cont_one_1"  style="display:block"> <img src="/public/images/index/sy32.jpg"><span>1965年7月：<br>毕业于同济医科大学</span></p>
                         <p class="zjry" id="cont_one_2" > <img src="/public/images/index/sy33.jpg"><span>2003年6月：<br>获得广州市科技进步奖二项</span></p>      
                         <p class="zjry" id="cont_one_3" > <img src="/public/images/index/sy34.jpg"><span>2006年：<br>担任中国医师协会泌尿外科工作委员会常委</span></p>      
                         <p class="zjry" id="cont_one_4" > <img src="/public/images/index/sy35.jpg"><span>2008年：<br>发表论文《论泌尿外科疾病的腔内微创治疗》获奖</span></p>      
                         <p class="zjry" id="cont_one_5" > <img src="/public/images/index/sy36.jpg"><span>2010年9月：<br>获得广东省科技发明奖一项</span></p>      
                         <p class="zjry" id="cont_one_6" > <img src="/public/images/index/sy37.jpg"><span>2011年：<br>任中国医师协会泌尿外科分会委员</span></p>      
                         <p class="zjry" id="cont_one_7" > <img src="/public/images/index/sy38.jpg"><span>2014年：<br>参加全国CUA泌尿外科医学峰会</span></p>              
                        
                         <p class="year_line"></p>
                         <ul>
                         <li id="one1" class="on" onmouseover='setTab("one",1,7)'>1965年</li>
                         <li id="one2"  onmouseover='setTab("one",2,7)'>2003年</li>
                         <li id="one3"  onmouseover='setTab("one",3,7)'>2006年</li>
                         <li id="one4"  onmouseover='setTab("one",4,7)'>2008年</li>
                         <li id="one5"  onmouseover='setTab("one",5,7)'>2010年</li>
                         <li id="one6"  onmouseover='setTab("one",6,7)'>2011年</li>
                         <li id="one7"  onmouseover='setTab("one",7,7)'>2014年</li>
                        
                         </ul>
                         
                          </dd>
                          </dt>

　                   选项卡JS代码
 
                                         <script type="text/javascript">
  function setTab(name,m,n){
for( var i=1;i<=n;i++){
var menu = document.getElementById(name+i);
var showDiv = document.getElementById("cont_"+name+"_"+i);
menu.className = i==m ?"on":"";
showDiv.style.display = i==m?"block":"none";
  }
  }
  
    </script> 
　　
    选项卡选项卡样式
    .dd_rigjt{ float:right; width:676px;}
    .goodat{ line-height:2.2; font-size:12px;}
    .goodat strong{ color:#2E55A0}
    .goodat a{ color:#F47701}

    PS：当然，站长朋友们需要根据自己的框架来修改其中的ID，js实现选项卡切换效果，是网站建设中常用到的效果，希望企创互联能够帮助到更多站长。