tab栏切换fengz 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         .box{
 12             height: 300px;
 13             width: 400px;
 14             border:1px solid #000;
 15             margin: 100px auto;
 16         }
 17         .mt span{
 18             display: inline-block;
 19             width: 93px;
 20             height: 50px;
 21             border: 1px solid #333;
 22             text-align: center;
 23             line-height: 50px;
 24             background: #ff3;
 25         }
 26         .mt span.current{
 27             background: purple;
 28         }
 29         ul li{
 30             list-style: none;
 31             float: left;
 32             width: 400px;
 33             height: 250px;
 34             border: 1px solid #e0e0e0;
 35             display: none;
 36             background: purple;
 37         }
 38         ul li.show{
 39             display: block;
 40         }
 41     </style>
 42 </head>
 43 <body>
 44     <div class="box" id="three">
 45         <div class="mt">
 46             <span class="current">新闻</span>
 47             <span>体育</span>
 48             <span>娱乐</span>
 49             <span>八卦</span>
 50         </div>
 51         <div class="mb">
 52             <ul>
 53                 <li class="show">新闻模块</li>
 54                 <li>体育模块</li>
 55                 <li>娱乐模块</li>
 56                 <li>八卦模块</li>
 57             </ul>
 58         </div>
 59     </div>
 60     <div class="box" id="one">
 61         <div class="mt">
 62             <span class="current">新闻</span>
 63             <span>体育</span>
 64             <span>娱乐</span>
 65             <span>八卦</span>
 66         </div>
 67         <div class="mb">
 68             <ul>
 69                 <li class="show">新闻模块</li>
 70                 <li>体育模块</li>
 71                 <li>娱乐模块</li>
 72                 <li>八卦模块</li>
 73             </ul>
 74         </div>
 75     </div>
 76     <div class="box" id="two">
 77         <div class="mt">
 78             <span class="current">新闻</span>
 79             <span>体育</span>
 80             <span>娱乐</span>
 81             <span>八卦</span>
 82         </div>
 83         <div class="mb">
 84             <ul>
 85                 <li class="show">新闻模块</li>
 86                 <li>体育模块</li>
 87                 <li>娱乐模块</li>
 88                 <li>八卦模块</li>
 89             </ul>
 90         </div>
 91     </div>
 92 </body>
 93 </html>
 94 <script>
 95     window.onload=function () {
 96         function tab(obj) {
 97                 var target=document.getElementById(obj);
 98                 var spans=target.getElementsByTagName('span');
 99                 var lis=target.getElementsByTagName('li');
100                 for(var i=0;i<spans.length;i++){
101                     spans[i].index=i;
102                     spans[i].onmouseover=function (ev2) {
103                         for(var j=0;j<spans.length;j++){
104                             spans[j].className=' ';
105                             lis[j].className=' ';
106                         }
107                         this.className='current';
108                         lis[this.index].className='show';
109                     }
110                 }
111                 }
112                 tab('one');
113                 tab('two');
114                 tab('three');
115     }
116 </script>

 

posted @ 2017-12-28 22:33  前端极客  阅读(268)  评论(0)  编辑  收藏  举报