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