jQuery Tabs标签页组件的用法（附带实例）

标签页（Tabs）是一种多面板的单内容区，每个面板与列表中的标题相关，单击标签页可以切换显示不同逻辑内容的显示/隐藏状态。

标签页有一些必须使用的特定标记，以便标签页能正常工作，这些特定标记分别如下：

标签页必须在一个有序的（<ol>）或无序的（<ul>）列表中。
每个标签页的标题必须在一个列表项（<li>）的内部，且必须被一个带有 href 属性的锚（<a>）包裹。

当焦点在标签页上时，如下键盘命令可用：

操作	描述
Up/Left	移动焦点到上一个标签上。如果当前焦点在第一个标签页上，则移动焦点到最后一个标签页上。在一个短暂的延迟后激活获得焦点的标签页。
Down/Right	移动焦点到下一个标签页上。如果当前焦点在最后一个标签页上，则移动焦点到第一个标签页上。在一个短暂的延迟后激活获得焦点的标签页。
Home	移动焦点到第一个标签页上。在一个短暂的延迟后激活获得焦点的标签页。
Space	激活与获得焦点的标签页相关的面板。
Enter	激活或切换与获得焦点的标签页相关的面板。
Alt+Page Up	移动焦点到上一个标签页上，并立即激活获得焦点的标签页。
Alt+Page Down	移动焦点到下一个标签页上，并立即激活获得焦点的标签页。

当焦点在面板上时，如下键盘命令可用：

Ctrl+Up：移动焦点到相关的标签页上。
Alt+Page Up：移动焦点到上一个标签页上，并立即激活获得焦点的标签页。
Alt+Page Down：移动焦点到下一个标签页上，并立即激活获得焦点的标签页。

标签页部件使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用标签页指定的样式，则可以使用如下 CSS class 名称：

ui-tabs：标签页的外层容器。当设置了 collapsible 选项时，该元素会额外带有一个 CSS class 名称 ui-tabs-collapsible；
ui-tabs-nav：标签页列表；
导航中激活的列表项会带有一个 CSS class 名称 ui-tabs-active。内容通过 AJAX 调用加载的列表项会带有一个 CSS class 名称 ui-tabs-loading；
ui-tabs-anchor：用于切换面板的锚；
ui-tabs-panel：与标签页相关的面板，只有在与其对应的标签页被激活时才可见。

【实例】制作一个关于各种网页语言介绍的标签页，用户可以通过单击标签页来切换各逻辑内容的显示/隐藏状态。此外当鼠标指针在标签页上悬停时，也可以切换各逻辑内容的显示/隐藏状态。程序开发步骤如下：

新建一个 index.html 文件；
将 jQuery UI 文件夹 jquery-ui-1.13.2.custom 和 index.html 放置在一起；
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现使用标签页显示各种网页语言介绍的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>标签页（Tabs）的使用</title>
<script>
$(function() {
    $("#tabs").tabs({
        collapsible: true,
        event: "mouseover"
    });
});
</script>
</head>
<body>
<div id="tabs">
<ul>
    <li><a href="#tabs-1">ASP.NET</a></li>
    <li><a href="#tabs-2">PHP</a></li>
    <li><a href="#tabs-3">Java Web</a></li>
</ul>
<div id="tabs-1">
    <p><strong>二次单击标签页可以隐藏内容</strong></p>
    <p>ASP.NET 是 Microsoft 公司推出的新一代建立动态 Web 应用程序的开发平台，可以把程序开发人员的工作效率提升到其他语言无法比拟的程度。与 Java、PHP、ASP 3.0、Perl 等相比，ASP.NET 具有方便性、灵活性、性能优、生产效率高、安全性高、完整性强及面向对象等特点，是目前主流的网站编程语言。</p>
</div>
<div id="tabs-2">
    <p><strong>二次单击标签页可以隐藏内容</strong></p>
    <p>PHP 是全球最普及、应用最广泛的互联网开发语言之一。PHP 语言具有简单、易学、源码开放、可操纵多种主流与非主流的数据库、支持面向对象的编程、支持跨平台的操作以及完全免费等特点，越来越受到广大程序员的青睐和认同。</p>
</div>
<div id="tabs-3">
    <p><strong>二次单击标签页可以隐藏内容</strong></p>
    <p>Java 是 Sun 公司推出的能够跨越多平台的、可移植性最强的一种面向对象的编程语言。也是目前最先进、特征最丰富、功能最强大的计算机语言之一。利用 Java 可以编写桌面应用程序、Web 应用程序、分布式系统、嵌入式系统应用程序等，从而使其成为应用范围最广的开发语言，特别是在 Web 程序开发方面。</p>
</div>
</div>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，效果如下图所示：

图 1 标签页的应用实例

jQuery Tabs标签页组件的用法（附带实例）

相关文章