10.1.3　JavaScript

准备好了HTML和CSS，已经可以看到顶部的标签页了，它们下面还有3个div（面板）彼此重叠，如图10-2所示。基本的外观放置好了。你只需要添加程序使得面板打开和关闭，并且修改标签页上的class，来让一个标签页成为“激活的”而其他标签页成为“常规的”。基本的步骤如下所示：

1.给标签页内部的链接添加一个click事件。

标签页面板只不过是访问者和标签页的交互：单击一个标签页来显示一个面板，单击另一个标签页来显示另外一个面板。

2.给click事件添加一个匿名函数，以便：

·隐藏当前可见的面板。

·从之前选择的标签页删除active类。

·给刚刚单击的标签页添加active类，以使其激活。

·显示和标签页相关联的面板。

3.触发第一个标签页上的click事件。

这个步骤是必需的，因为当初次载入页面时，所有的面板都是可见的，并且没有标签页选中。你可能只是编写代码来突出显示第一个标签页，并且隐藏第一个标签页之外的所有其他面板，但是，你不需要这么做，click事件的匿名函数（步骤2中）为你做了这些，因此，你只需要通过编程“单击”该标签，并且触发该函数。

因此，简而言之，事情就是这么完成的。现在，我们将在下面的教程中按部就班地进行编程。

图　10-2　标签页面板的HTML结构实际上很简单：一个div标签、一个无序的列表、一些链接，还有一些div标签