zoukankan html css js c++ java

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>

查看全文

相关阅读:
AcWing 1135. 新年好图论枚举
 uva 10196 将军模拟
 LeetCode 120. 三角形最小路径和 dp
LeetCode 350. 两个数组的交集 II 哈希
 LeetCode 174. 地下城游戏 dp
LeetCode 面试题 16.11.. 跳水板模拟
 LeetCode 112. 路径总和递归树的遍历
 AcWing 1129. 热浪 spfa
Thymeleaf Javascript 取值
 Thymeleaf Javascript 取值

原文地址：https://www.cnblogs.com/yangguoe/p/8138087.html