HTML+CSS+JS实现选项卡

来源：互联网发布：怎么修改手机游戏数据编辑：程序博客网时间：2024/05/16 14:41
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>实践题 - 选项卡</title>    <style type="text/css">     /* CSS样式制作 */       *{font:14px normal "microsoft yahei";padding:0px;margin:0px;}     #tabs{width:100%;padding-top:100px;}    #tabs ul{list-style:none;display:block;width:302px;height:30px;border-bottom:2px solid red;line-height:30xp;}    #tabs ul li{display:inline-block;float:left;width:60px;border:1px solid #999;margin-left:5px;text-align:center;height:23px;padding-top:5px;border-bottom:none;}    #tabs li:hover{cursor:pointer;}     #tabs .active{border-top:2px solid red;border-bottom:2px solid #fff;}     #tabs .text{border:1px solid blue; width:290px;height:120px;padding:5px;border-top:0;line-height:25px;display:none;}     #tabs .show{display:block;} #tabs .hide{display:none;}    </style>    <script type="text/javascript">             // JS实现选项卡切换window.onload=function(){    var liEleArr = document.getElementById("myul").getElementsByTagName("li");    var divEleArr = document.getElementById("tabs").getElementsByTagName("div");for(var i=0;i<liEleArr.length;i++){var liEle = liEleArr[i];liEle.index = i;liEle.onmouseover = function(){for(var j=0;j<liEleArr.length;j++){liEleArr[j].className="";divEleArr[j].className="text hide";}this.className="active";divEleArr[this.index].className="text show";}}}    </script> </head><body><!-- HTML页面布局 --><div id="tabs" align="center">    <ul id="myul">        <li class="active" style="margin-left:10px;">房产</li>        <li>家居</li>        <li>二手房</li>    </ul>    <div class="text show">        275万购昌平邻铁三居 总价20万买一居<br/>        200万内购五环三居 140万安家东三环<br/>        北京首现零首付楼盘 53万购东5环50平<br/>        京楼盘直降5000 中信府 公园楼王现房<br/>    </div>    <div class="text">        40平出租屋大改造 美少女的混搭小窝<br/>         经典清新简欧爱家 90平老房焕发新生<br/>         新中式的酷色温情 66平撞色活泼家居<br/>         瓷砖就像选好老婆 卫生间烟道的设计<br/>    </div>    <div class="text">          通州豪华3居260万 二环稀缺2居250w甩<br/>         西3环通透2居290万 130万2居限量抢购<br/>         黄城根小学学区仅260万 121平70万抛!<br/>         独家别墅280万 苏州桥2居优惠价248万<br/>    </div></div></body></html>
今天学习的时候写一个选项卡，献上代码和截图
0 0