如何在AJAX中为HTML5和CSS3构建选项卡式接口编程 - 傻瓜式

在HTML5和CSS3 Web开发中的一个重要技术是在AJAX中使用选项卡式界面。这允许用户通过选择一系列选项卡中的一个来改变段的内容。

在标签式界面中，一次只能看到一个元素，但这些标签都是可见的。标签界面比手风琴更容易预测，因为标签（不同于手风琴的标题）保持在同一个地方。

<！ --1 - >

选项卡改变颜色以指示当前突出显示哪个选项卡，并且它们也改变状态（通常通过改变颜色）以指示它们正在被悬停。当您单击另一个选项卡时，小部件的主要内容区域会被替换为相应的内容。

这是用户单击该选项卡时发生的情况。

<！ - 2 - >

就像手风琴一样，标签效果非常容易实现。查看代码：

$（init）;函数init（）{$（“#tabs”）。选项卡（）;}选项卡。 html

标签演示

Book 1
Book 2
Book 3


Book I - Creating the HTML Foundation






 - >

声音HTML基础
全部关于验证
选择工具
使用列表和表格管理信息
使用链接进行连接
添加图像
创建样式


书籍II - CSS样式

为您的世界着色
样式文本
选择器，类别和样式
边框和背景
CSS级别


书籍III - 使用位置用于布局的CSS

使用Fabulous浮点的乐趣
构建浮动页面布局
样式列表和菜单
使用替代的定位

构建基于选项卡的界面的机制非常类似于手风琴：

添加所有适当的文件。像大多数jQuery UI效果一样，您需要jQuery，jQuery UI和主题CSS文件。您还需要访问主题背景图形的图像目录。

正常建立HTML。
如果你正在建立一个组织良好的网页，你已经很接近了。

构建一个包含所有选项卡数据的div。
这是你将要做jQuery魔术的元素。

将主要内容区域放在命名div中。
将显示为一个页面的每个内容都应该放在一个带有描述性ID的div中。每个div应该放在tab div中。

添加内容的本地链接列表。
建立一个链接菜单。放置在标签的div顶部。每个链接应该是一个本地链接到其中一个div。例如，索引如下所示：

Book 1
```
Book 2
Book 3
照常构建一个init（）函数。
```
使用正常的jQuery技术。

调用主div上的tabs（）方法。令人难以置信的是，一行jQuery代码完成了所有的工作。