WEB前端：纯js如何实现tab切换（类似淘宝下面的详情切换）

这里分享的代码主要是自己每天学习的内容对其进行详细的复述，帮助自己能更加清晰的了解其中的关系。

详细功能介绍：主要是前端中比较常用的一个功能点，当我们点击商品介绍时，就会出现介绍的详情；当点击售后保障时，就会出现相关的保障信息等。

1.HTML+css对页面的设计

代码片.

// An highlighted block
<style>  
      * {     padding: 0;   
               margin: 0;   
        }   
  .tab {   width: 978px;  
           margin: 100px auto;    
       }              
   li {     float: left;            
            padding: 0 20px;        
            list-style: none;      
             height: 39px;          
            line-height: 39px;   
            cursor: pointer;          
            text-align: center;      
         }               
    .tab_list {           
            width: 978px;      
            height: 39px;  
            background-color: #f1f1f1;       
            border: 1px solid #ccc;        }           
   .tab_list ul .current {        
       background-color: #c81623;       
        color: #fff;     
        }    
        </style>

2.JavaScript相关

(1)首先是要获取tab_list 下边的小li，实现鼠标点击/经过时背景颜色的变化。这里主要用到的是排他思想（先将影响的因素全部排除掉，在设置自己的样式）。因为li有好多个，方便编写时我们最好采用for循环来进行点击/经过事件。下面展示排他思想中的背景颜色变化

// 1.首先是获取tab_list和tab_list下面的li元素
//document.querySelector（‘选择器’）是根据指定选择器返回第一个元素对象
//querySelectorAll（）返回的是指定选择器中的所有的元素
 var tab_list = document.querySelector(".tab_list");    
 var lis = tab_list.querySelectorAll("li");
 //2.实现点击哪个li，那个li的背景颜色就变化
 //采用for循环
 for (var i = 0; i < lis.length; i++) {
  lis[i].onmouseover = function() {             
     //先清除其他影响的因素              
       for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";              
              }          
             //留下自己的样式      
             //这里的element.className是类名样式操作，比较适合样式多，且复杂的，"current"是在css代码中写过的样式
      this.className = "current";
 

（2）实现点击/经过li显示相应的li对应的内容item，但是我们并不知道li是哪一个，怎么获取到相应的内容呢？这里我们可以给每一个小li自定义一个index值，然后再获取即可。

自定义属性操作：

（1）获取属性值：

element.属性

element.getAttribute('属性')

（2）设置属性值：element.属性=‘值’

 element.setAttribute('属性','值')

（3)移除属性值：

element.removeAttribute('属性')

``

//首先是获取到相应的item值
   var items = document.querySelectorAll(".item");
   //然后再刚才的for循环里面给每一个小li添加自定义属性index来进行索引
    lis[i].setAttribute("index", i);
   //显示下面的内容模块
   //先给index赋值获取，得到刚才自定义的属性
    var index = this.getAttribute("index");
    //在通过for循环对items进行遍历，在items范围的时候让里面的没被点击的items[i]的样式变为none，被点击的显示出来（通过索引值）
      for (var i = 0; i < items.length; i++) {
             items[i].style.display = 'none';
                }        
            items[index].style.display = 'block';
            }
                               

3.合并代码段

// 1.首先是获取tab_list和tab_list下面的li元素
//document.querySelector（‘选择器’）是根据指定选择器返回第一个元素对象
//querySelectorAll（）返回的是指定选择器中的所有的元素
 var tab_list = document.querySelector(".tab_list");    
 var lis = tab_list.querySelectorAll("li");
 var items = document.querySelectorAll(".item");
 //2.实现点击哪个li，那个li的背景颜色就变化
 //采用for循环
 for (var i = 0; i < lis.length; i++) 
 {
 //给lis[i]元素附属性质
 lis[i].setAttribute("index", i);
  lis[i].onmouseover = function() {             
     //先清除其他影响的因素，没有样式             
       for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";              
              }          
             //留下自己的样式      
             //这里的element.className是类名样式操作，比较适合样式多，且复杂的，"current"是在css代码中写过的样式
      this.className = "current";
          var index = this.getAttribute("index");
    //在通过for循环对items进行遍历，在items范围的时候让里面的没被点击的items[i]的样式变为none，被点击的显示出来（通过索引值）
      for (var i = 0; i < items.length; i++) {
             items[i].style.display = 'none';
                }        
            items[index].style.display = 'block';
            }
     }