12.1 Tab菜单与Tab面板简介

这里所说的高级网页组件是指一些网页上的比较复杂的用户界面，例如Tab面板、伸缩面板和折叠面板等组件。

Tab风格的面板一直受到广大周站制作者的青昧。Tab面板有时被称为“选项卡”面板，使用鼠标点击各个Tab选项卡就可以在不同页之间切换。

随处可见各式各样的Tab菜单，网易网站首页上可以看到的Tab面板，网址是http://www.163.com。

微软网站上的Tab菜单，网址是http://office.microsoft.com。

网页学习网http://www.lodidance.com首页的热点栏目也属于Tab菜单。

此外，还有很多网站都使用了与它们类似的网页元素。如果读者亲自试验一下，就会发现，这些网站上的Tab面板和菜单实际分为两种。

● 一种是切换各个Tab页中的内容时并不刷新浏览器窗口，说明各个页中的内容实际已经装载到页面上了，只是被隐藏了起来，只有被选中的Tab页内容被显示出来。上面例子中的163.com的页面属于这种类型。

● 另一种是切换各个Tab页中的内容时，会刷新浏览器窗口，实际上就是更换了一个新的HTML页面。上面例子中的微软网页属于这种情况。

要实现前者的效果，必须通过JavaScript的配合，仅通过CSS来实现是比较困难的，而且实现的功能非常有限。

实际上，也有一些网站使用Ajax技术，可以实现切换到某一页之后，在动态地从服务器上获取数据，局部刷新Tab页内的区域，而整个页面的其他部分则不需要重新从服务器获取数据。lodidance.com

本章将实现JavaScript配合的“隐藏/显示”方式的Tab面板，但对Ajax方式的Tab页不进行介绍，如果读者有兴趣，可以查找相关资料。

为了便于本章后面的讲解，将前一种方式（浏览器无刷新）制作的效果称为“Tab面板”，因为它是一个页面中的一个区域；而后一种方式（测览器刷新）制作的效果称为“Tab菜单”，因为它实际上就是多个页面之间的导航菜单。