原生html写tab页,原生JS选项卡（Tab页切换）

使用原生JS实现选项卡功能。

效果：

image.png

原理：全部隐藏，选择哪个哪个显示。

代码如下：

*{

margin: 0;

padding: 0;

}

#all{

width: 600px;

margin: 50px auto;

height: 500px;

border: 2px red solid;

position: relative;

}

#all #tab li{

list-style: none;

float: left;

width: 200px;

height: 50px;

line-height: 50px;

text-align: center;

font-size: 30px;

font-weight: 700;

}

#all .con{

width: 580px;

height: 430px;

position: absolute;

top: 60px;

left: 10px;

display: none;

}

window.onload = function(){

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

var lis = tab.getElementsByTagName('li');//获得标签li的数组

var cons = document.getElementsByClassName('con');//获得下面内容div的数组

for(var i=0;i

lis[i].num = i;//给对象添加属性，赋值用于标记

lis[i].onmousemove = function(){

//div先全部隐藏

for(var j = 0;j

cons[j].style.display = 'none';

}

//显示与鼠标所在li对应位置的div

cons[this.num].style.display = 'block';

}

}

}

• 军事
• 民生
• 娱乐

如有问题欢迎交流。

如转载请注明出处，谢谢！