html插入选项卡,HTML 选项卡

选项卡

*{

padding: 0;

margin: 0;

}

#tab ul li{

display: inline;

font-size: 30px;

padding-left: 30px;

/*获得焦点是，出现手型图标*/

cursor: pointer;

}

img{

width: 33.33%;

float: left;

margin-top: 30px;

}

.conceal{

display: none;

}

• 网站开发
• 公众号开发
• App开发

测试

window.onload =function(){

var Mytab = document.getElementById("tab");

var Myul = Mytab.getElementsByTagName("ul")[0];

var Myli = Myul.getElementsByTagName("li");

var MyDiv = Mytab.getElementsByTagName("div");

for (var i = 0; i < Myli.length; i++) {

Myli[i].index = i;

Myli[i].onclick =function(){

for (var j = 0; j < Myli.length; j++) {

Myli[j].className="off";

MyDiv[j].className="conceal";

}

this.className="on";

MyDiv[this.index].className="show";

}

}

}