CSS+JS实现同一页面可以重复使用的选项卡

在CSS 2规范中，伪类“:hover”（鼠标指向状态）可以应用在任何元素上，因此可以利用此伪类完成鼠标指向选项卡时的显示，但是当鼠标移开，显示效果会消失，因此还需要JavaScirpt配合实现选项卡状态及内容的显示和隐藏

“选项卡”经常会被混同为“滑动门”，滑动门只是一种背景自适应内容的实现方法，不只可以应用在导航菜单，一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。

“选项卡”一般和JavaScirpt及Ajax结合使用，以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合，完成切换的效果。

其中第一层的

的类名“tabOption”是标示这个

是选项，以却别内容里的

，类名“tabOn”则表示这个选项卡是打开的（即鼠标的:hover状态）。“
”为放置选项卡具体内容的层，通过CSS控制其显示或隐藏，此时，在IE 7/8、Firefox 3.0等浏览器内，已经可以实现指向选项卡时显示相应内容的效果。但是，由于IE 6只支持链接元素的:hover伪类，因此还需要JavaScript来兼容IE 6，同时，“:hover”状态当鼠标移出选项的时候就消失了，因此不便于浏览，所以也需要JavaScript来控制，设定当鼠标指向某个选项时，此选项的内容一直显示，即增加“tabOn”。

至此，选项卡制作完毕，此方法与其他方法不同的地方是，可以在页面内不同位置放置多个选项卡也不会冲突，同时只需要此一段JavaScript程序即可。