第一步：引用table.js 代码如下:[removed] [removed] 第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”； 第三步：调用函数： 代码如下:[removed] //参数分别为：默认选择项 应用块的id 选中的样式 table(0, “sidebar”, “active”) [removed] 一切OK，选项卡响应click事件，兼任IE和FF，等有时间了再优化，效果如下：
在JavaScript中实现一个通用且简单的表格选项卡功能可以极大地提升用户界面的交互性。这个教程主要涉及以下几个关键知识点：
1. **外部JavaScript引用**：在HTML文档中，通过`<script>`标签引用外部JS文件（如`table.js`），使得JS代码与HTML分离，有利于代码的组织和维护。
2. **DOM操作**：使用`getElementById`方法获取具有特定ID的HTML元素，这里是获取带有“sidebar”ID的div元素。同时，通过`getElementsByTagName`获取所有`<li>`元素，这些元素将作为选项卡。
3. **CSS样式**：定义CSS类来控制选中状态，例如`.active`，用于改变选中选项卡的样式。此外，还定义了`.sidebar`样式以布局选项卡的外观，包括宽度、背景色、边框等。
4. **JavaScript对象和原型**：创建一个名为`Table`的构造函数，用于初始化选项卡的相关属性，如默认选中项、ID和选中样式的类名。`Table.prototype`定义了一个原型对象，其中包含`bind`方法，用于绑定点击事件。
5. **事件处理**：使用`onclick`事件监听器为每个`<li>`元素设置点击事件。事件处理器内部通过`setClass`方法切换选中状态，并利用`getAttribute`获取触发事件元素的扩展属性（在这里是序号）。
6. **事件兼容性**：为了兼容不同浏览器，代码使用`window.event`和`e.target`来获取事件对象，这在IE和非IE浏览器中都能正常工作。
7. **函数调用**：在HTML文档的底部调用`table`函数，传入初始选中项、块ID和选中样式，以设置初始状态并绑定事件。
8. **自定义方法**：虽然示例中没有完整展示`setClass`方法，但可以推断这个方法用于根据传入的序号切换选中项的`active`类，实现高亮显示。
9. **HTML结构**：HTML文档包含一个`<ul>`列表，每个`<li>`代表一个选项卡，它们包裹在具有`sidebar`样式的`<div>`中。通过设置`li`的`cursor: pointer`，使鼠标悬停时显示手形，提示用户可以点击。
通过以上步骤，我们可以创建一个基本的选项卡系统，它在用户点击时能动态改变选中的选项卡，并保持在不同浏览器之间的兼容性。这个实现虽简单，但在实际项目中，可能还需要考虑更多的细节，如动画过渡效果、键盘导航支持以及无障碍访问(Accessibility)等。
