html 選項卡切換內容方法：
工具/原料
網頁編輯器dreamweaver
javascript中的getElementById和getElementsByTagName方法
操作步驟：
1、三個DIV形成的版塊只會顯示第三個汽車的內容。
二、制作過程
1、 制作HTML結構框架
2、完成對應CSS的輸入，使頁面形成特定布局
<!DOCTYPE?html>?<html?lang="en">?
<head>?
<meta?charset="UTF-8">? <title>tab切換</title>? <style?type="text/css">? button?{? width:120px;? height:?32px;? line-height:?32px;? background-color:?#ccc;? font-size:?24px;? }? div?{? display:?none;? width:200px;? height:?200px;? font-size:?72px;? color:#ddd;? background-color:?green;? border:1px?solid?black;? }? </style>?</head>?
<body>?
<button?style="background-color:?yellow;">1</button>? <button>2</button>? <button>3</button>? <button>4</button>? <div?style="display:block;">1</div>? <div>2</div>? <div>3</div>? <div>4</div>? <script?type="text/javascript">? var?buttonArr?=?document.getElementsByTagName("button");? var?divArr?=?document.getElementsByTagName("div");? for(var?i?=?0;?i?<?buttonArr.length;i++)?{? buttonArr[i].index?=?i;? //?buttonArr[i].setAttribute("index",i);? buttonArr[i].onclick?=?function()?{? for(var?j?=?0;?j?<?buttonArr.length;?j++)?{? buttonArr[j].style.backgroundColor?=?"#ccc";? buttonArr[this.index].style.backgroundColor?=?"yellow";? divArr[j].style.display?=?"none";? divArr[this.index].style.display?=?"block";? }? }? }? </script>?</body>?
</html>
3、輸寫javascript代碼，對選項卡標頭分別註冊相應的事件
<!doctype?html>?<html?lang="en">?
<head>?
<meta?charset="UTF-8">? <title>tab</title>? <style?type="text/css">? *?{padding:0;?margin:0;}? button?{? background-color:?#ccc;? width:80px;? height:?30px;? }? .btn-active?{? background-color:?yellow;? font-weight:bold;? font-size:?14px;? }? div{? width:200px;? height:?200px;? font-size:?64px;? background-color:?#0c0;? display:?none;? color:#fff;? }? .div-active?{? display:?block;? }? </style>?</head>?
<body>?
<button?class="btn-active">按鈕1</button>? <button>按鈕2</button>? <button>按鈕3</button>? <button>按鈕4</button>? <div?class="div-active">1</div>? <div>2</div>? <div>3</div>? <div>4</div>? <script?type="text/javascript">? //1.先獲取元素? var?buttonList?=?document.getElementsByTagName("button");? var?divList?=?document.getElementsByTagName("div");? //2.添加事件? for(var?i?=?0;?i?<?buttonList.length;?i++)?{? buttonList[i].index?=?i;? buttonList[i].onclick?=?function()?{? for(var?j?=?0;?j?<?buttonList.length;j++)?{? buttonList[j].className?=?"";? divList[j].className?=?"";? }? this.className?=?"btn-active";? divList[this.index].className?=?"div-active";? }? }? </script>?</body>?
</html>
4、完整代碼：
<!DOCTYPE?html><html><head?lang="en"><meta?charset="UTF-8">
<title>?選項卡</title>
<style?type="text/css">
/*?CSS樣式制作?*/? *{padding:0px;?margin:0px;} a{?text-decoration:none;?color:black;} a:hover{text-decoration:none;?color:#336699;}#tab{width:270px;?padding:5px;height:150px;margin:20px;}
#tab?ul{list-style:none;?display:;height:30px;line-height:30px;?border-bottom:2px?#C88?solid;}
#tab?ul?li{background:#FFF;cursor:pointer;float:left;list-style:none?height:29px;?line-height:29px;padding:0px?10px;?margin:0px?10px;?border:1px?solid?#BBB;?border-bottom:2px?solid?#C88;}
#tab?ul?li.on{border-top:2px?solid?Saddlebrown;?border-bottom:2px?solid?#FFF;}
#tab?div{height:100px;width:250px;?line-height:24px;border-top:none;?padding:1px;?border:1px?solid?#336699;padding:10px;}
.hide{display:none;}
</style>
<script?type="text/javascript">
//?JS實現選項卡切換
window.onload?=?function(){
var?myTab?=?document.getElementById("tab");//整個div
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?=?"hide";
}
this.className?=?"on";
myDiv[this.index].className?=?"show";
}
}}
</script></head><body><!--?HTML頁面布局?--><div?id?=?"tab">
<ul>
<li?class="off">房產</li>
<li?class="on">家居</li>
<li?class="off">二手房</li>
</ul>
<div?id="firstPage"?class="hide">
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab/a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
</div>
<div?id="secondPage"?class="show">
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
</div>
<div?id="thirdPage"?class?=?"hide">
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
<a?href?=?"#">切換代碼tab</a><br/>
</div></div></body></html>