1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <style>
    8.     .tab_list{
    9.         width: 652px;
    10.         overflow: hidden;
    11.     }
    13.     .tab_list li{
    14.         float: left;
    15.         height: 39px;
    16.         line-height: 39px;
    17.         padding: 0 20px;
    18.         text-align: center;
    19.         cursor: pointer;
    20.         list-style: none;
    21.         border: 1px solid black;
    22.     }
    24.      .tab_list .current{
    25.         background-color: red;
    26.         color: #fff;
    27.     }
    29.     .item{
    30.         display: none;
    31.     }
    33.     </style>
    34.     <body>
    36.     <div class="tab">
    38.         <div class="tab_list">
    39.             <ul>
    40.                 <li class="current">商品介绍</li>
    41.                 <li>规格与包装</li>
    42.                 <li>售后保障</li>
    43.                 <li>商品评价</li>
    44.                 <li>手机社区</li>            
    45.             </ul>
    47.         </div>
    49.         <div class="tab_con">
    50.             <div class="item" style="display: block;">商品介绍内容</div>
    51.             <div class="item">规格与包装内容</div>
    52.             <div class="item">售后保障内容</div>
    53.             <div class="item">商品评价内容</div>
    54.             <div class="item">手机社区内容</div>            
    55.         </div>
    57.     </div>
    59.     <script>
    60.         var tab_list=document.querySelector(".tab_list");
    61.         var lis=tab_list.querySelectorAll("li");
    62.         var items=document.querySelectorAll(".item");
    63.         //for循环绑定点击事件
    64.         for(var i=0;i<lis.length;i++){
    65.             //先给五个小li设置索引号
    66.             lis[i].setAttribute("index",i);
    67.             lis[i].onmouseover=function(){
    68.                 //干掉所有人，其余人清除class这个类
    69.                 for(var i=0;i<lis.length;i++){
    70.                     lis[i].className=" ";
    71.                 }
    72.                 //留下我自己
    73.                 this.className="current";//添加样式
    74.                 //下面模块内容显示
    75.                 var index=this.getAttribute("index");//得到小li的索引号
    76.                 //干掉所有人，其余人隐藏起来
    77.                 for(var i=0;i<items.length;i++){
    78.                     items[i].style.display="none";
    79.                 }
    80.                 //留下我自己,根据索引号找到与之对应的
    81.                 items[index].style.display="block";
    82.             }
    84.         }
    86.     </script>
    88.     </body>
    89. </html>