html+css+js實現選項卡切換
阿新 • • 發佈：2018-12-23
html+css+js選項卡
原理：先把所有的隱藏，再把當前的顯示出來
效果如下：
一、Html頁面佈局
Html頁面佈局由三個按鈕（input）和三個div組成，三個按鈕中總有一個當前按鈕（高亮），三個div放內容，三個div都是隱藏只有一個顯示；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head 二、css樣式
@charset "utf-8";
/* CSS Document */
.box {
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
background-color: #ccc;
padding: 10px
}
.box input {
margin:0px;
float: left;
width: 100px;
text-align: center;
padding: 10px
}
.active {
background: #CF0;
}
.content {
display:none;
text-align: center;
line-height: 300px;
height: 300px;
weight: 300px;
background: yellow;
}
三、JavaScript實現選項卡切換
// JavaScript Document
window.onload=function(){
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};