本文主要是介绍用JavaScrip实现选项卡切换的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>实践题 - 选项卡</title><style type="text/css">/* CSS样式制作 */ *{padding:0px;margin:0px;font:12px normal "moicrosoft yahei";}#tabs {width:290px;height:150px;padding:5px;margin:20px;;}#tabs ul {list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}#tabs ul li{background:#fff;display:inline-block;cursor:pointer;float:left;width:60px;height:28px;margin:0px;border:1px solid #aaaaaa;border-bottom:none;list-style:none;line-height:;text-align:center;}#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:2px solid #fff;}#tabs div{padding:5px;border:1px solid #336699;height:120px;line-height:25px;}.hide{display:none;}</style><script type="text/javascript"> // JS实现选项卡切换window.οnlοad=function(){var oTab=document.getElementById("tabs");var oUl=oTab.getElementsByTagName("ul")[0];var oLis=oUl.getElementsByTagName("li");var oDivs=oTab.getElementsByTagName("div");for(var i=0;i<oLis.length;i++){oLis[i].index=i;oLis[i].onclick = function(){for(var i=0;i<oLis.length;i++){oLis[i].className="";oDivs[i].className="hide";}this.className="on";oDivs[this.index].className="";}};}</script></head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
<ul><li class="on">房产</li><li>家居</li><li>二手房</li>
</ul><div>275万购昌平邻铁三居 总价20万买一居<br>200万内购五环三居 140万安家东三环<br>北京首现零首付楼盘 53万购东5环50平<br>京楼盘直降5000 中信府 公园楼王现房<br></div><div class="hide">0平出租屋大改造 美少女的混搭小窝<br>经典清新简欧爱家 90平老房焕发新生<br>新中式的酷色温情 66平撞色活泼家居<br>瓷砖就像选好老婆 卫生间烟道的设计<br></div><div class="hide">通州豪华3居260万 二环稀缺2居250w甩<br>西3环通透2居290万 130万2居限量抢购<br>黄城根小学学区仅260万 121平70万抛!<br>独家别墅280万 苏州桥2居优惠价248万<br></div>
</div></body>
</html>这篇关于用JavaScrip实现选项卡切换的效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
