纯html选项卡切换效果,纯js实现：多个选项卡切换效果

【实例简介】实行多个选项卡的切换

【实例截图】

【核心代码】

选项卡

.active{

background:orange;

}

#div1 div{

width:200px;

height: 200px;

border: 1px solid orange;

margin-top:10px;

display: none;

}

window.οnlοad=function()

{

var oDiv1=document.getElementById("div1");

var oBtns=oDiv1.getElementsByTagName("input");

var oDivs=oDiv1.getElementsByTagName("div");

for(var i=0;i

{

oBtns[i].index=i;//index: 人为添加的标记，目的是获取当前的点击的那个按钮

oBtns[i].οnclick=function()

{

for(var i=0;i

{

oBtns[i].className="";//初始化，取消所有按钮的背景

oDivs[i].style.display="none";//初始化，所有div不显示

}

this.className="active";

oDivs[this.index].style.display="block";

}

}

}

• 新闻之家
• 新闻之家
• 新闻之家
• 新闻之家
• 新闻之家

• 军事之家
• 军事之家
• 军事之家
• 军事之家
• 军事之家

• 体育纵横
• 体育纵横
• 体育纵横
• 体育纵横
• 体育纵横

• 音乐在线
• 音乐在线
• 音乐在线
• 音乐在线
• 音乐在线