选项卡效果

来源：互联网发布：淘宝高颜值零食图片编辑：程序博客网时间：2024/05/22 01:43

这个主要是测试的JavaScript的综合运用，实现选项卡的效果。最后实现了预订的效果，但是时间有限，仍有两点待提高的地方：1. 效果体验更好，比如离开选项卡时候可以自动回到默认选项；2. 方法比较笨，效率不高，代码冗余。

总结一下也是亮点，1. 还是循环遍历绑定事件不是非常熟练；2.经验欠缺，没有掌握一些技巧。比如选项卡效果，可以通过更改类名，将需要隐藏的类名改为hide（hide类的样式为隐藏）来实现。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>实践题 - 选项卡</title>    <style type="text/css">     /* CSS样式制作 */          *{margin: 0;padding:0;}       ul{list-style:none;}       .nav li{float:left;margin-top:10px;}       .nav li a{display:block;padding:10px;border: 1px solid #ccc;border-bottom:0;margin-left: 10px;;text-decoration:none;color:#000;overflow: hidden;height: 20px;z-index: 0;}       .container {position: absolute;left: 10px;top:52px;z-index: -1;}       .tab{position: absolute;height: 100px;width: 300px;border: 1px solid blue;border-top:2px solid red;padding: 10px;display:none;}       .nav li a:hover{border-top: 2px solid red;border-bottom:2px solid #fff; }       // 将a设置为才能继续给a设置宽高和背景    </style>    <script type="text/javascript">         window.onload=function(){          var nav=document.getElementsByClassName("nav");             var options=document.getElementsByTagName("a");          mouseover(options[0]);         }         function mouseover(obj){             var nav=document.getElementsByClassName("nav");             var options=document.getElementsByTagName("a");             switch(obj.innerHTML){                case "房产": document.getElementById("fangchan").style.display="block";                document.getElementById("jiaju").style.display="none";                document.getElementById("ershoufang").style.display="none";break;                case "家居": document.getElementById("jiaju").style.display="block";                document.getElementById("fangchan").style.display="none";                document.getElementById("ershoufang").style.display="none";                break;                case "二手房": document.getElementById("ershoufang").style.display="block";                document.getElementById("fangchan").style.display="none";                document.getElementById("jiaju").style.display="none";                break;             }         }                   </script> </head><body><!-- HTML页面布局 --><ul class="nav"><li><a href="javascript:;" onmouseover="mouseover(this)">房产</a></li><li><a href="javascript:;" onmouseover="mouseover(this)">家居</a></li><li><a href="javascript:;" onmouseover="mouseover(this)">二手房</a></li></ul><div class="container"><div class="tab" id="fangchan">    <p>275万购昌平邻铁三居 总价20万买一居</p>    <p>200万内购五环三居 140万安家东三环</p>    <p>北京首现零首付楼盘 53万购东5环50平</p>    <p>京楼盘直降5000 中信府 公园楼王现房</p></div><div class="tab" id="jiaju">    <p>40平出租屋大改造 美少女的混搭小窝</p>    <p>经典清新简欧爱家 90平老房焕发新生</p>    <p>新中式的酷色温情 66平撞色活泼家居</p>    <p>瓷砖就像选好老婆 卫生间烟道的设计</p></div><div class="tab" id="ershoufang">    <p>通州豪华3居260万 二环稀缺2居250w甩</p>    <p>西3环通透2居290万 130万2居限量抢购</p>    <p>黄城根小学学区仅260万 121平70万抛!</p>    <p>独家别墅280万 苏州桥2居优惠价248万</p></div></div> </body></html>

优化后的代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>实践题 - 选项卡</title>    <style type="text/css">        *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}        #tabs {width:290px;padding:5px;height:150px;margin:20px;}        #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}        #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}        #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}        #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}        .hide{display: none;}    </style>    <script type="text/javascript">         window.onload = 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,len = oLis.length;i<len;i++){                 oLis[i].index = i;                 oLis[i].onclick = function() {                     for(var n= 0;n<len;n++){                         oLis[n].className = "";                         oDivs[n].className = "hide";                     }                     this.className = "on";                     oDivs[this.index].className = "";                 }             };         }    </script></head><body><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">        40平出租屋大改造 美少女的混搭小窝<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> var tabs=document.getElementsByClassName("tab");             var nav=document.getElementsByClassName("nav");             var options=nav.getElementsByTagName("a");             for(var i=0;i<options.length;i++){                  options[i].onmouseover=function(){                     tabs[i].style.display="block";                  }             }

0 0