/* 經過昨天一整天的糾結和摸索。總結下學習初期我最致命的幾個問題……
1、var oDiv = document.getElementById(''); 一定要多輸，熟悉后o u什么的字母別搞錯了 .后不能有空格啥的， E大寫這些都還好，Elements 如果是s，后面接的是 className 或者 TagName 。
2、在js中，一定要區分清楚 class 和className ，前面很容易搞混……
3、遍歷 for循環后，操作的對象一般是標簽或者class，這是很多個對象，所以 一定要有[]…… ！！！
*/
------------------------------------------------正文的html ------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>簡單的選項卡</title>
<style type="text/css">
#div1 .active{ background:#FF9; }
#div1 div{ width:200px; height:200px; border:1px solid #333; background:#CCC; display:none; }
</style>
</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;">教育</div>
<div>培訓</div>
<div>招生</div>
<div>出國</div>
</div>
<script src="js/xuanxiangka.js"></script>
</body>
</html>
------------------------------------------javascript代碼 ---------------------------------------------------
//window.onload 以后記住，都把它添上吧，有備無患
window.onload = function() {
var oDiv = document.getElementById('div1'); //要操作什么量，就把這些都先聲明了
var oBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0; i<oBtn.length; i++) { //for循環，具體操作什么看循環中間的值，oBtn所以是操作4個按鈕
oBtn[i].index = i; //賦每個按鈕的屬性（這里的屬性是自定義屬性）的值為i
oBtn[i].onclick = function() { //對每個按鈕添加一個點擊的事件
for(var i=0; i<oBtn.length; i++) { //繼續用for循環，上一個是點擊的for循環，這個循環用來操作點擊后的后續事件
oBtn[i].className = ''; //讓每個按鈕的class名為空
aDiv[i].style.display = 'none'; //讓每個div的style樣式的display為none;
}
this.className = 'active'; //當前點擊（對應onclick）對象的class名為 active
aDiv[this.index].style.display = 'block'; //aDiv（按鈕下的div） this.index（賦了i的，就是說當前點擊按鈕對應的div） 的樣式display為none
}
}
}
總結下 今天學到的。 做這樣一個選項卡，總的思路就是，
先讓所有的都隱藏，再讓當前的顯示出來~~~~
明天一練，堅持學習， 勤於思考，讓自己有所進步和收獲~加油