JavaScript--tab栏切换效果

tab栏切换效果：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11         ul {
 12             list-style: none;
 13         }
 14         .wrapper {
 15             width: 1000px;
 16             height: 475px;
 17             margin: 0 auto;
 18             margin-top: 100px;
 19         }
 20         .tab {
 21             border: 1px solid #ddd;
 22             border-bottom: 0;
 23             height: 36px;
 24             width: 320px;
 25         }
 26         .tab li {
 27             position: relative;
 28             float: left;
 29             width: 80px;
 30             height: 34px;
 31             line-height: 34px;
 32             text-align: center;
 33             cursor: pointer;
 34             border-top: 4px solid #fff;
 35         }
 36         .tab span {
 37             position: absolute;
 38             right: 0;
 39             top: 10px;
 40             background: #ddd;
 41             width: 1px;
 42             height: 14px;
 43             overflow: hidden;
 44         }
 45         .products {
 46             width: 1002px;
 47             border: 1px solid #ddd;
 48             height: 476px;
 49         }
 50         .products .main {
 51             float: left;
 52             display: none;
 53         }
 54         .products .main.selected {
 55             display: block;
 56         }
 57         .tab li.active {
 58             border-color: red;
 59             border-bottom: 0;
 60         }
 61     </style>
 62 </head>
 63 <body>
 64 <div class="wrapper">
 65     <ul class="tab" id="tab">
 66         <li class="tab-item active">国际大牌<span>◆</span></li>
 67         <li class="tab-item">国妆名牌<span>◆</span></li>
 68         <li class="tab-item">清洁用品<span>◆</span></li>
 69         <li class="tab-item">男士精品</li>
 70     </ul>
 71     <div class="products" id="products">
 72         <div class="main selected">
 73             <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
 74         </div>
 75         <div class="main">
 76             <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
 77         </div>
 78         <div class="main">
 79             <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
 80         </div>
 81         <div class="main">
 82             <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
 83         </div>
 84     </div>
 85 </div>
 86 </body>
 87 </html>
 88 <script>
 89 //  功能需求：鼠标移入tab选项卡时，
 90 //      1. 上面tab选项卡要切换
 91 //      2. 下面产品内容要切换
 92 
 93 //    PS: 提前预知知识点
 94     var tab = document.getElementById('tab');    // 这句话是在整个网页文档(document)里通过id查找tab
 95 //  获取products盒子下的div盒子
 96     var divBoxs = document.getElementById('products').getElementsByTagName('div');
 97     var tabItem = tab.getElementsByTagName('li'); // 这句是约束在选项卡(tab) 里通过标签名查找li
 98 //   接着往后书写逻辑，
 99 //   tab栏效果上方功能需求的描述。
100 //   鼠标移入后，排他思想，选择当前选择卡 (前提是选项卡与产品内容页数相同)
101     for (var i = 0 ; i < tabItem.length ; i++) {
102         tabItem[i].index = i;
103         tabItem[i].onmouseover = function () {
104             //        排他思想
105             for(var j = 0 ; j < tabItem.length ; j++) {
106                 tabItem[j].className = "tab-item";
107                 divBoxs[j].className = "main";
108             }
109             //        选中当前选项卡
110             this.className = "tab-item active";
111             //        选择产品内容页
112             divBoxs[this.index].className = "main selected";
113         }
114     }
115 
116 
117 
118 </script>

 

posted @ 2017-10-14 10:28  QinXiao.Shou  阅读(275)  评论(0)    收藏  举报