1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 * { 9 margin: 0px; 10 padding: 0px; 11 list-style: none; 12 } 13 14 h2 { 15 margin-bottom: 20px; 16 background: #ccc; 17 display: inline-block; 18 } 19 20 h2 span { 21 background: blue; 22 display: inline-block; 23 width: 80px; 24 height: 40px; 25 text-align: center; 26 cursor: pointer; 27 } 28 29 div { 30 width: 600px; 31 height: 200px; 32 border: 2px solid blue; 33 overflow: hidden; 34 position: relative; 35 } 36 37 ul { 38 width: 600px; 39 position: absolute; 40 left: 0px; 41 transition: 0.2s linear; 42 } 43 44 ul li { 45 width: 200px; 46 height: 200px; 47 background: #eee; 48 float: left; 49 } 50 51 ul li:nth-child(even) { 52 background-color: green; 53 } 54 55 ul.sh { 56 display: block; 57 } 58 59 ul.hd { 60 display: none; 61 } 62 63 span.disable { 64 background: #ccc; 65 color: #eee; 66 cursor: default; 67 } 68 </style> 69 </head> 70 71 <body> 72 73 <section id="s1"> 74 75 <h2><span>家电</span> | <span class="disable">手机</span> | <span class="disable">笔记本</span>| <span class="disable">西瓜</span> </h2> 76 <div> 77 78 <ul class="sh"> 79 <li>家电</li> 80 <li>BB</li> 81 <li>CC</li> 82 83 </ul> 84 <ul class="hd"> 85 <li>手机</li> 86 <li>EE</li> 87 <li>FF</li> 88 </ul> 89 <ul class="hd"> 90 <li>笔记本</li> 91 <li>EE</li> 92 <li>FF</li> 93 </ul> 94 <ul class="hd"> 95 <li>西瓜西瓜</li> 96 <li>EE</li> 97 <li>FF</li> 98 </ul> 99 </div> 100 101 </section> 102 <hr /> 103 104 <section id="s2"> 105 106 <h2><span>奶粉</span> | <span class="disable">奶油</span> | <span class="disable">奶酪</span> </h2> 107 <div> 108 109 <ul class="sh"> 110 <li>奶粉</li> 111 <li>BB</li> 112 <li>CC</li> 113 114 </ul> 115 <ul class="hd"> 116 <li>奶油</li> 117 <li>EE</li> 118 <li>FF</li> 119 </ul> 120 <ul class="hd"> 121 <li>奶酪</li> 122 <li>EE</li> 123 <li>FF</li> 124 </ul> 125 </div> 126 127 </section> 128 129 <section id="s3"> 130 131 <h2><span>箱包</span> | <span class="disable">香水</span> | <span class="disable">香料</span> </h2> 132 <div> 133 134 <ul class="sh"> 135 <li>箱包</li> 136 <li>BB</li> 137 <li>CC</li> 138 139 </ul> 140 <ul class="hd"> 141 <li>香水</li> 142 <li>EE</li> 143 <li>FF</li> 144 </ul> 145 <ul class="hd"> 146 <li>香料</li> 147 <li>EE</li> 148 <li>FF</li> 149 </ul> 150 </div> 151 152 </section> 153 <script> 154 function SN(_id) { 155 var btn = document.querySelectorAll(_id + " span"); 156 var uls = document.querySelectorAll(_id + " ul"); 157 158 for(var i = 0; i < btn.length; i++) { 159 btn[i].index = i; 160 btn[i].onmouseover = function() { 161 ini() 162 //让当前选项卡亮色 163 this.className = "" 164 uls[this.index].className = "sh"; 165 } 166 } 167 168 function ini() { 169 for(var i = 0; i < btn.length; i++) { 170 btn[i].className = "disable" 171 uls[i].className = "hd"; 172 } 173 } 174 } 175 176 SN("#s1"); 177 SN("#s2"); 178 SN("#s3"); 179 </script> 180 </body> 181 182 </html>