JavaScript tab页 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4 <meta charset="UTF-8">
  5 <title>实践题 - 选项卡</title>
  6 <style type="text/css">
  7 /* CSS样式制作 */
  8 .tab-div {
  9 width: 400px;
 10 position: relative; /*作为选项卡内容的定位*/
 11 }
 12 ul {
 13 list-style: none;
 14 }
 15 .tab {
 16 width: 400px;
 17 overflow: hidden;
 18 margin: 0;
 19 padding: 0;
 20 
 21 position: relative;
 22 z-index: 2;
 23 }
 24 .tab li{
 25 float: left;
 26 width: 80px;
 27 height: 30px;
 28 line-height: 30px;
 29 text-align: center;
 30 border: 1px solid #DDD;
 31 border-bottom: 0;
 32 margin-left: 10px;
 33 background: #fff;
 34 cursor: pointer;
 35 }
 36 .tab-content {
 37 width: 350px;
 38 /*position: absolute;*/
 39 border: 1px solid #DDD;
 40 border-top: 3px solid #e4393c;
 41 
 42 text-align: center;
 43 
 44 position: absolute;
 45 top: 31px;
 46 left: 0;
 47 }
 48 .tab-content ul {
 49 margin: 0;
 50 padding: 10px;
 51 }
 52 .tab-content li {
 53 padding: 10px;
 54 }
 55 .tab-content li a {
 56 color: #000;
 57 text-decoration: none;
 58 }
 59 .tab-content li a:hover {
 60 color: #e4393c;
 61 text-decoration: underline;
 62 }
 63 .tab .tab-active {
 64 border-top: 3px solid #e4393c;
 65 border-bottom: 3px solid #fff;
 66 }
 67 .tab-content-show {
 68 display: block;
 69 }
 70 .tab-content-hide {
 71 display: none;
 72 }
 73 </style>
 74 <script type="text/javascript">
 75 // JS实现选项卡切换
 76 window.onload = function() {
 77 var tabList = document.getElementById("tab-list");
 78 var aLis = tabList.getElementsByTagName("li");
 79 var tDiv = document.getElementById("tDiv");
 80 var contents = tDiv.getElementsByTagName("div");
 81 
 82 for(var i = 0; i < aLis.length; i++) {
 83 aLis[i].index = i;
 84 aLis[i].onclick = function() {
 85 for(var j = 0; j < aLis.length; j++) {
 86 aLis[j].className = '';
 87 }
 88 this.className = "tab-active";
 89 
 90 for(var j = 0; j < contents.length; j++) {
 91 contents[j].className = "tab-content tab-content-hide";
 92 }
 93 contents[this.index].className = "tab-content tab-content-show";
 94 };
 95 }
 96 };
 97 
 98 </script>
 99 
100 </head>
101 <body>
102 <!-- HTML页面布局 -->
103 <div id="tDiv" class="tab-div">
104 <ul id="tab-list" class="tab">
105 <li class="tab-active">房产</li>
106 <li>家居</li>
107 <li>二手房</li>
108 </ul>
109 <div class="tab-content tab-content-show">
110 <ul>
111 <li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>
112 <li><a href="#">200万内购五环三居 140万安家东三环</a></li>
113 <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
114 <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
115 </ul>
116 </div>
117 <div class="tab-content tab-content-hide">
118 <ul>
119 <li><a href="#">40平出租屋大改造 美少女的混搭小窝</a></li>
120 <li><a href="#">经典清新简欧爱家 90平老房焕发新生</a></li>
121 <li><a href="#">新中式的酷色温情 66平撞色活泼家居</a></li>
122 <li><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
123 </ul>
124 </div>
125 <div class="tab-content tab-content-hide">
126 <ul>
127 <li><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></li>
128 <li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li>
129 <li><a href="#">黄城根小学学区仅260万 121平70万抛!</a></li>
130 <li><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></li>
131 </ul>
132 </div>
133 </div>
134 </body>
135 </html>
View Code

 

posted @ 2018-12-27 11:23  cunzhang1  阅读(163)  评论(0)    收藏  举报