我的书签
添加书签
移除书签10.1.4 标签页面板教程
既然已经理解了创建一个导航菜单的基础知识，下面来介绍如何实现它。在这个教程中，我们将添加CSS和JavaScript，将10.1.1节介绍的基本的HTML菜单列表转换成一个导航栏。
注意：参见1.3节中的“注意”部分以获取如何下载教程文件的相关信息。
1.在文本编辑器中打开chapter10文件夹下的tabs.html文件。
该文件包含了10.1.1节所述的HTML文件：一个容器div、一个用于标签页的链接的无序列表、一个包含面板的div，以及针对每个面板的一个div。基本的CSS格式也设置好了。如果在Web浏览器中查看页面，将会看到3个标签页以及3个面板的内容（每个面板都叠放在另一个之上）。
注意：为了让用于标签页面板的CSS尽可能清晰，我们将其直接放在一个内部样式表中。如果想要将这个CSS重用于你自己的标签页面板，最好将其放到你的站点所使用的主外部样式表中。
jQuery文件已经链接了，并且$（document）.ready（）函数也准备好了，因此，第一步是隐藏该面板。
2.单击$（document）.ready（）函数中的空行，并且添加如下粗体所示的代码：
$（document）.ready（function（）{
$（'.tabs a'）.click（function（）{
}）；//end click
}）；//end ready
$（'. t abs a'）选择了无序列表（它有一个类为tabs）中的所有＜a＞标签（5.2节介绍了click（）函数）。此时，你有了一个空的匿名函数，因此，将开始用程序填充它。首先，你将添加语句让代码更加高效一点。
3.在匿名函数中添加如下粗体所示的代码：
$（'.tabs a'）.click（function（）{
var$this=$（this）；
}）；//end click
正如4.10.2节所提到的，当在一个事件处理程序的匿名函数内部时，$（this）引用为其添加事件的元素。在这个例子中，$（this）引用访问者单击的标签页。每次使用$（）选择一个元素的时候，会真正地调用jQuery函数，迫使Web浏览器执行很多行的JavaScript代码。如果你需要在一个函数内多次使用相同的选择器，将其保存到一个变量中，这是一个好办法。在这个例子中，$this只不过是程序员（也就是你）创建的一个变量。
将$（this）的值保存到变量中，意味着任何时候，当你想要访问该链接的时候，只需要使用变量$this就可以了，不需要让jQuery再次来选择找出链接。换句话说，如果在函数中两次用到$（this），那么，浏览器必须运行jQuery函数两次，以选择完全相同的元素。如果你先将$（this）存储到一个变量$this中，你可以在自己的代码中多次使用该变量，而不需要迫使浏览器做额外的工作（13.1.2节更加深入地介绍了将jQuery选择器存储到变量中的好处）。
现在，可以隐藏面板，并且激活单击的标签页。4.添加如下第3行和第4行所列出的代码。
1$（'.tabs a'）.click（function（）{
2 var$this=$（this）；
3$（'.panel'）.hide（）；
4$（'.tabs a.active'）.removeClass（'active'）；
5}）；//end click
第3行代码隐藏了面板。由于每个面板都是带有一个panel的class的＜div＞标签，$（'.panel'）会选择所有的面板，并且jQuery's.hide（）函数（参见6.1.1节）隐藏它们。你需要这么做，因为当你打开一个面板的时候，之前的面板将仍然是可见的。
第4行从标签页内部的任何链接上删除了active类。在10.1.2节中，我们探讨了如何创建一个active类样式，以允许你为用户单击的标签页提供一种不同的外观（一种“你正位于此处”的外观）。当然，当访问者单击激活一个标签页时，你还需要从之前选定的标签页上删除该类，这就是第4行代码使用jQuery的remove-Class（）函数所做的事情（参见4.8.1节）。接下来将突出显示访问者刚才单击过的标签页。
5.添加如下第5行所示的代码。
1$（'.tabs a'）.click（function（）{
2 var$this=$（this）；
3$（'.panel'）.hide（）；
4$（'.tabs a.active'）.removeClass（'active'）；
5$this.addClass（'active'）.blur（）；
6}）；//end click
记住，$this是你在第2行创建的一个变量，并且它保存了到访问者所单击的链接的一个引用。因此，$this.addClass（'active'）给链接添加了active类：Web浏览器将使用CSS来样式化这个标签。最后的.blur（）使用了jQuery的链化功能（参见4.6.4节的介绍）。这只是在.addClass（）之后运行的另一个函数。.blur（）函数删除了一个链接的焦点（或者form字段）：在这个例子中，对于访问者单击过或标记过的链接，它删除了Web浏览器围绕链接显示的模糊线条。没有了这个，激活的标签页看上去就更好看了。
这个函数基本上完成了，你只需要显示面板。6.添加如下第6行和第7行所示的代码。
1$（'.tabs a'）.click（function（）{
2 var$this=$（this）；
3$（'.panel'）.hide（）；
4$（'.tabs a.active'）.removeClass（'active'）；
5$this.addClass（'active'）.blur（）；
6 var panel=$this.attr（'href'）；
7$（panel）.fadeIn（250）；
8}）；//end click
每个标签页实际上是指向其相关的面板的一个链接。记住，一个面板的HTML看上去如下所示：＜div id="panel1"class="panel"＞，并且每个标签页的HTML看上去如下所示：＜a href="#panel1"＞。注意，href值看上去就像是一个CSS ID选择器，由于jQuery使用CSS选择器来选择一个页面元素，因此你可以获取链接的HREF并且使用它来定位你想要显示的面板。第6行创建了一个新的变量panel，来保存该链接的HREF属性（使用4.9节介绍的jQuery的.attr（）函数）。
第7行使用该HREF来选择面板，然后，使用jQuery的fadeIn（）函数将其淡入视线（参见6.1.2节）。你可以使用jQuery的其他效果函数，诸如show（）、slideDown（）或animate（）来替代fadeIn（）。
现在程序已经编写好了，如果页面载入的时候你触发一个单击操作，那么，你可以运行这个函数、隐藏面板、选择一个标签页并且显示其相关联的面板。幸运的是，jQuery使得很容易模拟任何的事件以及触发一个事件处理程序。
7.在click（）函数的后面再添加一行额外的代码来触发第一个标签页上的一个“click”。
1$（'.tabs a'）.click（function（）{
2 var$this=$（this）；
3$（'.panel'）.hide（）；
4$（'.tabs a.active'）.removeClass（'active'）；
5$this.addClass（'active'）.blur（）；
6 var panel=$this.attr（'href'）；
7$（panel）.fadeIn（250）；
8}）；//end click
9$（'.tabs li：frst a'）.click（）；
这段代码使用了一个相当复杂的选择器：.tabs li：first a，来选择第一个标签页。基本上，你可以从右到左地读这个选择器（就像所有的子孙选择器一样）。在最右端，a表示我们的目标是选择一个＜a＞标签。在中间，li：first是第一个孩子伪元素，它匹配一个＜li＞标签，而这个＜li＞标签是另一个标签的第一个孩子。由于标签是由一个项目符号列表构成的，li：first表示第一个列表项，或者在这个例子中，是第一个标签页。最后，.tabs确保我们选择的链接所在的列表项是标签页面板的一部分。这防止我们意外地选择了位于页面上任何其他地方的另一个符号列表中的一个链接（例如，一个导航栏）。
最后，你可以使用.click（）函数，不只是设置一个函数来响应click事件，而是真正地触发该事件。因此，第9行实际上是在说：“Web浏览器，单击第一个标签页吧。”这会触发整个一系列的动作：隐藏面板、突出显示面板并且将合适的面板淡入视线中。哦，你几乎就在那个位置。如果你在Web浏览器中预览页面，可能会注意到一个小问题。由于面板实际上是页内链接，如果你在一个较小的显示器中查看页面，可能会看到浏览器跳到了面板之下，而不是显示面板。你需要告诉浏览器，不要指向这个链接。
8.在click处理程序的末尾添加return false；（参见第9行）。完整的代码如下所示：
1$（document.ready（function（）{
2$（'.tabs a'）.click（function（）{
3 var$this=$（this）；
4$（'.panel'）.hide（）；
5$（'.tabs a.active'）.removeClass（'active'）；
6$this.addClass（'active'）.blur（）；
7 var panel=$this.attr（'href'）；
8$（panel）.fadeIn（250）；
9 return false；
10}）；//end click
11$（'.tabs li：first a'）.click（）；
12}）；//end ready
9.保存页面并在Web浏览器中预览。
完整的教程如图10.3所示。只需要向无序列表（该列表包含了指向用于新的面板的新的div标签的链接）插入额外的列表项，就可以添加更多的标签页和更多的面板。
注意：你可以在chapter10教程文件夹中看到本教程的一个完整版本（complete_tabs.html）。此外，标签页面板代码的一个更加高级的版本位于complete_complex_tabs.html文件中，它考虑到一个单个页面上的多个带标签页的面板，它用到了13.3节介绍的jQuery的一些高级DOM Traversal函数。
图 10-3 标签页面板提供了一种优雅的方式，用来访问众多的信息并且节省了We b页面资源
快速熟悉jQuery UI项目
作为jQuery UI的一部分，你可以找到更高级的标签页面板版本。jQuery UI是jQuery团队的一个官方项目，其目标是提供解决基本的用户交互问题的插件、折叠、标签页、对话框、日历挂件和可拖拽页面元素。这个项目有自己的网站（http：//jqueryui.com/），可以在那里找到最新的代码、演示，以及到jQuery主Web站点上的文档的链接。
jQuery UI为Web开发者提供了众多的工具，甚至支持CSS主题，它允许你为所有的jQuery UI元素创建一种一致的外观和感觉。jQuery UI相当复杂，并且包含了众多不同元素。你可以定制化jQuery UI文件以满足自己的需要，不要考虑那些不需要的组件，从而节省文件大小和下载速度，并且，你甚至可以创建自己的CSS主题来和站点的颜色、字体和贴图相匹配。
http：//jqueryui.com/download中的一款在线下载工具可以帮助你完成这个过程。
本书的第3版在很多章节中都用到了j Q u e r y UI，但是，从那时起，jQuery UI团队决定重新编写该项目的所有代码，并且添加了大量新的、令人兴奋的用户界面挂件和工具。遗憾的是，在编写本书的时候，jQuery UI的新版本（版本1.9）还没有推出，因此，你不用浪费时间学习大量的、注定要在不久的将来被替代的用户界面挂件，本书不会介绍如今的jQuery UI。
然而，jQuery UI有着很好的前景并且值得关注。请访问jQuery UI的站点看看版本1.9是否推出了。如果是，继续学习它。
