一個簡單的tab選項卡執行個體

結構：

View Code

 1 <div class="demo">
 2     <ul id="tab_t1" class="hd">
 3         <li>新聞</li>
 4         <li>視頻</li>
 5         <li>圖片</li>
 6     </ul>
 7     <ul id="tab_c1" class="bd">
 8         <li class="news">
 9             我正要推開車門，他從身後挽住了我的腰，我不由自主回頭，觸到他如星子一般的眼眸："康楠......如果覺得辛苦，一定要告訴我，讓我替你分擔。從現在開始，你不再是一個人了，明白了嗎？"
10         </li>
11         <li class="videos">
12             我站在轉彎的街角，清風吹拂，將我的裙角微微掀起，我只得捏著裙擺，瀏覽著街邊小店的櫥窗打發時間。時間一分一秒地過去，林默風遲遲沒有出現。終於聽到小車的轟鳴聲，奧迪停在了路口，玻璃搖下來，戴著墨鏡的林默風面無表情地注視著我，看著我向他走過來。他今天也穿得十分休閑隨意，一件藍色格子的鱷魚T恤和白色休閑褲，一隻手放鬆地搭在車窗玻璃上，墨鏡裡，那雙瞳仁目光灼灼地盯著我，彷彿想看穿我的心事。我不禁納悶地問："你怎麼了？"
13         </li>
14         <li class="photos">
15             愛情是場機遇，轉瞬即逝，可惜在它閃現時許多人都往往沒有來得及做好擁抱的準備。所以人世間才有那麼多傷心的人兒，流淚的情歌，傷感的情懷……休完年假，我回到公司，卻敏感地察覺到了一絲異樣。辦公室裡氣氛有些詭異，大家瞄著我的眼神也帶著莫名其妙的同情。我的心裡浮現一絲不祥的預感，他們怎麼了？我只離開了4天，是不是工作上出什麼事了？
16         </li>
17     </ul>
18  </div>

實現過程：

var $ = function(id) {return document.getElementById(id);};function getChildNode(superNode, index) {/* * 功能說明： * 傳入父元素節點，按照index順序尋找子節點，從1開始（注意：只針對元素節點） * 如果不傳入index或index是0，則返回所有子節點 */if(!superNode.childNodes) return;//if (typeof index !== 'number') { alert('請輸入數字索引'); return; }index = Number(index) || 0;var subNodes = [];var result = null;for(var i=0, len=superNode.childNodes.length; i<len; i++) {//得到所有子項目節點var node = superNode.childNodes[i];if(node.nodeType == 1) {subNodes.push(node);} else {continue;}}if(index === 0) {result = subNodes;} else {for(var i= 0; i<subNodes.length; i++) {subNodes[i].flag = i + 1;if(subNodes[i].flag == index) {result = subNodes[i];break;};}}return result? result : alert('你輸入的索引值對應的子節點不存在！');}function TabObj(tabT, tabC, index, type) {this.index = Number(index) || 0;this.type = Number(type) || 0;this.btns = getChildNode(tabT, 0);this.boxs = getChildNode(tabC, 0);this.open(this.index);for(var i=0; i<this.btns.length; i++) {var _this = this;this.btns[i].flag = i;if(this.type == 0) {this.btns[i].onmouseover = function() {_this.open(this.flag);};} else {this.btns[i].onclick = function() {_this.open(this.flag);};}}}TabObj.prototype = {open: function(n) {this.close();this.btns[n].className = 'open';this.boxs[n].className = 'block';},close: function() {for(var i=0; i<this.btns.length; i++) {this.btns[i].className = 'close';this.boxs[i].className = 'hidden';}}}window.onload = function() {var tabObj1 = new TabObj($('tab_t1'), $('tab_c1'));var tabObj2 = new TabObj($('tab_t2'), $('tab_c2'), 1, 1);}

說明：定義了兩種類型的事件，即滑鼠移上去切換或者滑鼠點擊切換；另外，還可以自行定義頁面載入時選項卡停在那裡，預設是第一個按鈕上。

最後，請單擊查看Demo