选项卡

style 里默认margin和padding清零

a标签去下划线 

text-decoration: none;   ul li  需 变成  display: inline-block;   ul li a{             display: block;             text-align: center;             background-color: #ccc;         } .active{             background-color: yellow;         } .content{             width: 186px;             height: 200px;             border: 1px solid #ccc;  大边框         } JS代码 window.onload=function(){             var as=document.querySelectorAll("li a"); 声明变量接收值             var cons=document.querySelectorAll(".content");             for (var i = 0; i < as.length; i++) {                as[i].onclick=function(){                   for (var j = 0; j < as.length; j++) {                      as[j].className="";                   }                   this.className="active";                   var idx=this.attributes["data-idx"].value;  声明idx  attributes                   for (var j = 0; j < cons.length; j++) {                       cons[j].style.display="none"; 不显示                             }                   cons[idx].style.display="block"; 显示                }                             }         }   
ul li里第一个a标签加  class为active     加data-idx=”0“ 空连接# 其他li 加 data-idx ="1" 、data-idx="2"  <div class="content"></div>  

标签：cons,选项卡,idx,li,var,data,display
来源： https://www.cnblogs.com/zyp717201/p/15514685.html