選項卡也是網頁經常使用的功能，如下圖：
通過鼠標指向或者點擊不同的選項卡，可以顯示不同的內容。那麼，要怎麼實現這樣的選項卡呢？
我們現在來製作一個選項卡，這裏先從選項卡的佈局講起。選項卡上方的四個選擇項，我們將其設爲button按鈕，可以看到，四個按鈕中總有一個是處於高亮（選中）狀態（採用class實現）。而選擇項下方顯示的內容，可以設置爲4個不同的div塊。默認情況下，我們會將第一個按鈕的狀態設爲高亮，第一個div的display屬性設置爲block，另外三個div的display屬性設置爲none。
此外我們還需要設計這個功能的JS代碼部分。我們可以通過getElementsByTagName來選中按鈕和div，同時通過for循環對每組按鈕和div進行操作。問題來了，採用for循環每次點擊執行的函數是一樣的，可在onclick事件裏，我們希望做到的是點擊選擇項該選擇項就變爲高亮，也就是說每次點擊變爲高亮的按鈕是不一樣的。那麼JS要如何得知我們想操作的是該選擇項呢？這個問題可以採用this關鍵字來解決。this指的是當前發生事件的元素，通過this關鍵字JS可以得知我們想操作的就是我們點擊的元素。
除了這一點外，如果直接這麼寫，我們產生的功能是點擊一個button使其變亮，但實際上，其它button按鈕的顏色並沒有發生變化，也就是說會產生多個button按鈕同時變亮的情況。由於我們並不能確定哪個button是亮的，爲了避免這種情況，最簡單的辦法是在當前button變亮前，把所有button的高亮狀態去掉（即將className設置爲空）。
現在我們還剩最後一個問題，也就是完成按鈕點擊後div的切換。在原理上，它和前面的按鈕狀態切換類似，先將所有div隱藏，然後讓當前div顯示出來。然而，this選中的是當前的按鈕而不是當前div，我們要如何獲取當前div呢？因爲button數組的下標和div數組的下標是一樣的，因此我們只需要確定button數組的下標就有辦法完成這件事。在這裏，我們在JS裏給button添加一個index屬性（理論上也可以在HTML裏添加，但是大部分瀏覽器都會過濾掉）使其等於下標，然後通過this.index就可以使div獲得button的下標了。
完整代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}
</style>
<script>
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';
//alert(this.index);
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>2222</div>
<div>333</div>
<div>4444</div>
</div>
</body>
</html>
效果如下：
JavaScript簡易日曆
這裏我們通過JS製作一個簡易日曆，其效果如下：
這個功能的實現似乎和選項卡並沒有什麼區別，但很明顯的是，使用12個div放置每個月的內容顯得很麻煩，也會導致HTML文件變得比較臃腫。因此，我們考慮只用1個div完成這件事。也就是說，我們應該使用JS來改變這個div塊裏面的文字而不是進行單純的div疊加。在這裏，我們所採取的方法是修改元素的innnerHTML屬性。
爲了說明innerHTML的具體用法，我們舉一個例子。
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:150px; border:1px solid black;}
</style>
<script>
window.onload=function ()
{
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function ()
{
oDiv.innerHTML=oTxt.value;
//alert(oDiv.innerHTML);
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="設置文字" />
<div id="div1">
</div>
</body>
</html>
效果如下：
在這個案例裏，我們將txt1裏的內容拿出來賦值給了div1的innerHTML屬性，當我們在txt1中輸入文字點擊確認後文字會出現在div1中。innnerHTML指的是該標籤下所有的HTML內容，既可以用於修改也可以用於讀取。因此，製作我們的簡易日曆，只需要修改下方div塊的innerHTML屬性即可。 完整代碼如下：
HTML部分：
<html>
<head>
<meta charset="utf-8">
<title>JavaScript簡易日曆 - 智能課堂 - www.zhinengshe.com</title>
<link href="zns_style.css" rel="stylesheet" type="text/css" />
<script>
window.onload=function ()
{
var aDatas=[
"快過年了，大家可以商量着去哪玩吧～",
"精通JavaScript開發課程 - 結課標準 - 有十條標準可讓大家修練成JS高手……",
"HTML5開發課程，讓你熟練掌握移動應用開發技術",
"精通各種DOM類應用，熟練掌握面向對象編程思想（OOP）、熟悉JS面向對象開發方式 - 智能課堂 - www.zhinengshe.com",
"熟練掌握AJAX技術及相關應用（例如：新浪微博級應用） - 智能課堂 - www.zhinengshe.com",
"可以獨立寫出類似jQuery的小型庫（支持各類選擇符、事件類、DOM、自定義動畫animate、AJAX……） - 智能課堂 - www.zhinengshe.com",
"精通JS運動特效技術，能完整實現各類網站所有動畫特效，如 智能課堂 官網 - 智能課堂 - www.zhinengshe.com",
"掌握JS調試及優化技術、能兼容所有瀏覽器 - 智能課堂 - www.zhinengshe.com",
"精通JS事件對象及事件的工作機制，並能完成各類跨平臺應用模塊的開發 - 智能課堂 - www.zhinengshe.com",
"能獨立開發表現和性能都很優秀的RIA應用 - 智能課堂 - www.zhinengshe.com",
"瞭解後臺編程的相關知識，能夠和後臺工程師配合完成大型交互應用 - 智能課堂 - www.zhinengshe.com",
"熟悉正則表達式的編寫、應用及高級表單驗證技術 - 智能課堂 - www.zhinengshe.com"
];
var oDiv=document.getElementById('tab');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aBtn=oUl.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onmouseover=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
}
this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活動</h2><p>'+aDatas[this.index]+'</p>';
};
}
};
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h2>1月活動</h2>
<p>快過年了，大家可以商量着去哪玩吧～</p>
</div>
</div>
</body>
</html>
css部分：
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }
.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }
.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }
這裏有幾個需要注意的新知識點。
第一點：字符串拼接。+運算符不僅可以進行數值運算，當+運算符兩端存在字符串時，+運算符會進行字符串拼接的操作。
alert('abc'+12+5+'def');
結果如下：
瀏覽器在做加法時，會從左到右運算，因此該運算的順序爲abc->abc12->ab125-
>abc125def，如果想將12與5相加，需要添加一個括號。
alert('abc'+(12+5)+'def');
結果如下：
第二點：在修改每月文字的具體內容時，我們採取了數組的方法。理論上我們可以採用if語句判斷月份來修改文字，但需要判斷12次，因此採用數組的方法明顯更爲簡便。我們前面已經講過一點數組，在JS裏，一個數組最簡單的定義方式如下：
var arr=[1,2,3,4];
arr這個數組一共包括1，2，3，4四個元素。同樣地，在我們的日曆裏面，我們也定義了一個數組aDatas，存入每個月的信息，同時依舊通過this.index這個下標找到對應的元素。
第三點：數組下標是從0開始。當然，月份是從1開始的，所以我們在輸出月份時將this.index的值加了1。