首页 > 代码库 > 简单选项卡切换（一）

简单选项卡切换（一）

2024-09-03 06:50:12   217人阅读

可以手动切换，另设置定时器可使其自动切换

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6 </head>
  7 <style type="text/css">
  8     *{
  9         margin: 0;
 10         padding: 0;
 11         font-size: 12px;
 12         font-family: "微软雅黑";
 13         color: #000000;
 14         text-decoration: none;
 15         list-style-type: none;
 16     }
 17     #tab-list{
 18         width: 275px;
 19         height: 190px;
 20         margin: 30px auto;
 21     }
 22     #list{
 23         height: 32px;
 24         border-bottom: #8B4513 2px solid;
 25     }
 26     #list li{
 27         display: inline-block;
 28         width: 60px;
 29         border: 1px solid #999999;
 30         border-bottom: none;
 31         line-height: 30px;
 32         margin-left: 5px;
 33         text-align: center;
 34         cursor: pointer;
 35     }
 36    #list .active{
 37         border-top: 2px solid #8B4513;
 38        border-bottom: 2px solid #fff;
 39     }
 40     #tab-list div{
 41         border: 1px solid #7396B8;
 42         border-top: none;
 43     }
 44     #tab-list div li{
 45         height: 30px;
 46         line-height: 30px;
 47         text-indent: 8px;
 48     }
 49     #tab-list .show{
 50         display: block;
 51     }
 52     #tab-list .hidden{
 53         display: none;
 54     }
 55 
 56 </style>
 57 <script type="text/javascript">
 58     window.onload=function(){
 59         var tab=document.getElementById(‘tab-list‘);
 60         var list=document.getElementById(‘list‘).getElementsByTagName(‘li‘);
 61         var div=tab.getElementsByTagName(‘div‘);
 62         var timer=null;
 63         var index=0;
 64         for(var i=0;i<list.length;i++){
 65             list[i].num=i;
 66             list[i].onmouseover=function(){
 67                 Change(this.num);
 68             }
 69         }
 70         function Change(curIndex){
 71             for(var i=0;i<list.length;i++){
 72                 list[i].className="";
 73                 div[i].className="hidden";
 74             }
 75             list[curIndex].className="active";
 76             div[curIndex].className="show";
 77             index=curIndex;
 78         }
 79         //自动播放
 80         function autoPlay(){
 81             timer=setInterval(function(){
 82                 index++;
 83                 if(index > list.length - 1){
 84                     index=0;
 85                 }
 86                 Change(index);
 87             },2000);
 88         }
 89         autoPlay();
 90         tab.onmouseover=function(){
 91             clearInterval(timer);
 92         }
 93         tab.onmouseout=function(){
 94             autoPlay();
 95         }
 96     }
 97 </script>
 98 <body>
 99 <div id="tab-list">
100     <ul id="list">
101         <li class="active">房产</li><li>家居</li><li>二手房</li>
102     </ul>
103     <div class="show">
104         <ul>
105             <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
106             <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
107             <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
108             <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
109         </ul>
110     </div>
111     <div class="hidden">
112         <ul>
113             <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
114             <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
115             <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
116             <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
117         </ul>
118     </div>
119     <div class="hidden">
120         <ul>
121             <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
122             <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
123             <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
124             <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
125         </ul>
126     </div>
127 </div>
128 
129 </body>
130 </html>

 

简单选项卡切换（一）


联系
我们