JavaScript实现网页tab栏效果制作

JS网页–tab栏制作，供大家参考，具体内容如下

在网页的制作中，通常会使用到tab栏，例如淘宝，商品详情，规格参数和累计评价三个栏，点击不同的栏下面出现的内容不同。在这样的设计中，JS可以做到。

根据淘宝做出默认状态下为商品介绍栏以及对应的文字，鼠标点击其他栏目，点击的栏目背景颜色变红，同时下面的栏目出现点击栏目的解释。

程序源码：

 
 
 

 
  * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  .tab {
   margin: 100px auto;
   width: 1200px;
   height: 330px;
   background-color: royalblue;
  }
  .tab .tab_list {
   height: 30px;
   background-color: slategrey;
  }
  .tab ul li{
   float: left;
   list-style: none;
   cursor: pointer;
   width: 100px;
   height: 30px;
  }
  .color {
   background-color: red;
  }
  .tab .tab_con {
   height: 300px;
   background-color: silver;
  }
 


 
  
   

    
商品介绍
    
规格与包装
    
售后保障
    
商品评价
    
手机社区
   
  
  
   商品介绍
   规格与包装
   售后保障
   商品评价
   手机社区

  
 

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。