选项卡
style 里默认margin和padding清零
a标签去下划线
text-decoration: none;
ul li 需 变成
ul li里第一个a标签加 class为active 加data-idx=”0“ 空连接#
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>
