類似淘寶裏面的這種，點擊不同的選項，下面會展示不同的內容。
（只實現了原理，沒做樣式，略醜��）
下面是代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選項卡</title>
<style type="text/css">
#div1 .active {background: yellow;}
#div1 div{width: 200px;height: 200px;background: #ccc;border: 1px solid #999;display: none;}
</style>
<script type="text/javascript">
window.οnlοad=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; //自定義屬性index
aBtn[i].οnclick=function()
{
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
//this 當前發生事件的元素
aDiv[this.index].style.display='block';
}
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="充話費">
<input type="button" value="旅行">
<input type="button" value="遊戲">
<input type="button" value="車險">
<div style="display: block;">1111</div>
<div>2222222</div>
<div>333333333</div>
<div>goodluck</div>
</div>
</body>
</html>
