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 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 320px; 25 } 26 .tab li { 27 position: relative; 28 float: left; 29 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 1px; 42 height: 14px; 43 overflow: hidden; 44 } 45 .products { 46 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>