1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 li { 15 list-style-type: none; 16 } 17 18 .tab { 19 978px; 20 margin: 100px auto; 21 } 22 23 .tab_list { 24 height: 39px; 25 border: 1px solid #ccc; 26 background-color: #f1f1f1; 27 } 28 29 .tab_list li { 30 float: left; 31 height: 39px; 32 line-height: 39px; 33 padding: 0 20px; 34 text-align: center; 35 cursor: pointer; 36 } 37 38 .tab_list .current { 39 background-color: #c81623; 40 color: #fff; 41 } 42 43 .item_info { 44 padding: 20px 0 0 20px; 45 } 46 47 .item { 48 display: none; 49 } 50 </style> 51 </head> 52 53 <body> 54 <div class="tab"> 55 <div class="tab_list"> 56 <ul> 57 <li class="current">商品介绍</li> 58 <li>规格与包装</li> 59 <li>售后保障</li> 60 <li>商品评价（50000）</li> 61 <li>手机社区</li> 62 </ul> 63 </div> 64 <div class="tab_con"> 65 <div class="item" style="display: block">商品介绍模块内容</div> 66 <div class="item">规格与包装模块内容</div> 67 <div class="item">售后保障模块内容</div> 68 <div class="item">商品评价（50000）模块内容</div> 69 <div class="item">手机社区模块内容</div> 70 </div> 71 </div> 72 <script> 73 var tab_list = document.querySelector('.tab_list') 74 var lis = tab_list.querySelectorAll('li') 75 var items = document.querySelectorAll('.item') 76 77 for (var i = 0; i < lis.length; i++) { 78 //给每个li设置一个index值， 79 lis[i].setAttribute('index', i) 80 lis[i].onclick = function () { 81 //排他思想 82 for (var i = 0; i < lis.length; i++) { 83 lis[i].className = '' 84 } 85 this.className = 'current' 86 //获取当前自定义属性的index值 87 var index = this.getAttribute('index') 88 //先干掉其他的item的display值 89 for (var i = 0; i < items.length; i++) { 90 items[i].style.display = 'none' 91 } 92 //然后给当前点击的item属性让它显示出来 93 items[index].style.display = 'block' 94 } 95 } 96 </script> 97 </body> 98 </html>
