说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简易选项卡</title> <style> body,ul,li{ /*内外边距全为0，消除不同浏览器上的显示区别*/ margin:0; padding:0; } body{ font:12px/1.5 Tahoma;/*字号行高字体*/ } #outer{ width:450px; margin:10px auto;/*左右置中*/ } #tab{ overflow:hidden; zoom:1; background:#000;/*黑色*/ border:1px solid #000; } #tab li{ float:left;/*左浮动，水平排列*/ color:#fff;/*白色*/ height:30px; cursor:pointer;/*手形*/ line-height:30px;/*行高*/ list-style-type:none;/*去除样式*/ padding:0 20px; } #tab li.current{ color:#000;/*黑色*/ background:#ccc;/*背景灰白色*/ } #content{ border:1px solid #000;/*黑色*/ border-top-width:0; } #content ul{ line-height:25px;/*行高*/ display:none;/*默认不显示*/ margin:0 30px; padding:10px 0; } </style> <script> window.onload = function () { var oLi = document.getElementById("tab").getElementsByTagName("li");//链式调用2个方法，获取tab标签中的所有li元素，返回一个集合 var oUl = document.getElementById("content").getElementsByTagName("ul");//链式调用，获取content标签中的所有ul元素，返回一个集合 for (var i = 0; i < oLi.length; i++) { oLi[i].index = i;//给每个li元素对象添加index属性 oLi[i].onmouseover = function () {//给每个li元素注册mouseover事件 for (var n = 0; n < oLi.length; n++) oLi[n].className = ""; //先清除所有li元素上的类，如果存在的话 this.className = "current";//给当前被点击的li元素添加类 for (var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";//隐藏所有ul内容， oUl[this.index].style.display = "block";//显示与标签对应的内容 } } } </script> </head> <body> <!--一个div包裹一个ul列表做为标签名和一个子div，子div中包裹3个ul列表--> <div id="outer"> <ul id="tab"> <!--标签名--> <li class="current">第一课</li> <li>第二课</li> <li>第三课</li> </ul> <div id="content"> <ul style="display:block;"> <li>网页特效原理分析</li> <li>响应用户操作</li> <li>提示框效果</li> <li>事件驱动</li> <li>元素属性操作</li> <li>动手编写第一个JS特效</li> <li>引入函数</li> <li>网页换肤效果</li> <li>展开/收缩播放列表效果</li> </ul> <ul> <li>改变网页背景颜色</li> <li>函数传参</li> <li>高重用性函数的编写</li> <li>126邮箱全选效果</li> <li>循环及遍历操作</li> <li>调试器的简单使用</li> <li>典型循环的构成</li> <li>for循环配合if判断</li> <li>className的使用</li> <li>innerHTML的使用</li> <li>戛纳印象效果</li> <li>数组</li> <li>字符串连接</li> </ul> <ul> <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li> <li>JavaScript出现的位置、优缺点</li> <li>变量、类型、typeof、数据类型转换、变量作用域</li> <li>闭包：什么是闭包、简单应用、闭包缺点</li> <li>运算符：算术、赋值、关系、逻辑、其他运算符</li> <li>程序流程控制：判断、循环、跳出</li> <li>命名规范：命名规范及必要性、匈牙利命名法</li> <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li> <li>定时器的使用：setInterval、setTimeout</li> <li>定时器应用：站长站导航效果</li> <li>定时器应用：自动播放的选项卡</li> <li>定时器应用：数码时钟</li> <li>程序调试方法</li> </ul> </div> </div> </body> </html>