当前位置:企创互联 > 新闻资讯 > 网站建设 > >

Js简单实用的选项卡切换效果(图文讲解)

发表日期:2020-10-24 17:10文章编辑:深圳网站SEO优化浏览次数:

    很多站长在制作模板的时候,常常会用到选项卡切换,今天,深圳企创互联就告诉大家如何用最简单的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实现选项卡切换效果,是网站建设中常用到的效果,希望企创互联能够帮助到更多站长。
   

文章为企创互联创作,转载请注明来自:http://www.szqchl.com.cn/wangzhanjianshe/60.html
最新新闻

网站建设如何带来好的收益?

网站是展示企业品牌的一个门面,随着会联网的飞速发展,很多...

日期:2021-04-19   浏览次数:

外贸企业做网站SEO优化有什么好处?

外贸企业做网站SEO优化有什么好处? 首要,咱们先了解国外独立...

日期:2021-03-16   浏览次数:

网站SEO优化如何选择好的域名?

1.有利于SEO优化的域名不要包括 - -不方便用户输入。其他的域名...

日期:2021-03-16   浏览次数:

新网站刚上线优化该如何做?

一个网站刚上线有很多事情要处理,比如死链接的检测,网站速...

日期:2021-03-15   浏览次数:

网站SEO优化人员必须掌握的5大刚要

网站SEO优化看起来很很简单,很多人都以为只是发发文章,发发...

日期:2021-03-15   浏览次数:

扬州SEO优化具体要求怎么做?

扬州SEO优化具体要求怎么做? 这是老生常谈的问题了,其实做扬...

日期:2021-03-12   浏览次数: