下面这种形式的选项卡在网站制作中经常碰到

这样的选项卡的形式，可以在很小的空间内显示大量的内容，并且版面看起来很整齐，在访客需要显示特定内容时，可以很快的呈现出来。

这样的选项卡是怎么作的呢？

首先，我们了解一下选项卡的构成。

了解了购成之后，我们可以大约的写出选项卡的代码布局方式

代码大约是这样的：

为了让程序能识别这些选项，我们要给这些DIV命名，设置上ID和NAME
然后代码变成这样：

这里要注意的是，所有作为选项标题的DIV的ID和NAME是一样的，所有作为内容的DIV的ID和NAME也是一样的。

为了区别选择项，未选择项，还要让选项更美观，我们应该给这些选项设置上一些样式：加上样式之后，代码如下：

在上面的样式表中，　设置了点前点击的选项样式为 title 没有选项的选项样式为 title1 默认会把第一个选项设置为已选项，　下方显示第一个选项的内容，隐藏其它选项的内容。

这时，页面会呈现下面的样式：

这个样子不是很漂亮，但我们已经可以看到基本的选项卡了，如果大家需要更漂亮的选项卡，请修改样式表，得到更好看的样子。

上面的选项卡，除了不好看之外，还有一个重要的问题，就是没有办法和鼠标一起动作，作出选择。怎么才能让选项卡，随着鼠标的移动选择不同的项目呢？
我们需要把选项卡用JS程序来控制。
我们在页面代码中，　引用JS/PAGE.JS如下图：

上图中，被选择的部分的代码，是每个页面都必须有的，这些代码完成了对系统JS框架的调用和基本的样式表的调用，还设置了SEO和TITLE两个标签。

如果要作选项卡，引用上图第９行，红线框中的JS/PAGE.JS是关键，引用了这些代码后，在DIV之后加上建立选项卡的JS。如下图：

注意看下方，我们增加了一段JS，在上面的注释中，我们已经写上了这些JS的含义，有几个地方需要注意：
１.　这些JS必须写在选项卡DIV的后面。

２.　选项的数量，和选项内容的数量，必须一致。

３.　如果一个页面中，　要作N组选项卡，这N组选项卡的选项标题和选项内容的名字必须是不一样的，但同一组内的名字要是相同的。

4.　N组选项卡可以使用相同的样式表。

5.　注意看上图中红色箭头标注的对应关系。

这个代码加上之后，就成了真正可用的选项卡了，鼠标移动到某选项上，下面的内容就会跟着变化。

下面我们要想，在选项卡中，调用不同的数据，那个好办，只要不同的选项内容的DIV中，调用不同的标签就可以实现。标签的使用我们就不在这里重复描述了。

如果还有不明白的地方，请和我们的客服QQ联系，或是在论坛发贴，我们改进这个帮助。