选项卡也是网页经常使用的功能，如下图：
通过鼠标指向或者点击不同的选项卡，可以显示不同的内容。那么，要怎么实现这样的选项卡呢？
我们现在来制作一个选项卡，这里先从选项卡的布局讲起。选项卡上方的四个选择项，我们将其设为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。