如何在AJAX中为HTML5和CSS3编程构建选项卡式界面
时间：2020-02-23 14:28:40 来源:igfitidea点击:
HTML5和CSS3 Web开发中的一项重要技术是在AJAX中使用选项卡式界面。
这允许用户通过选择一系列选项卡中的一个来更改段的内容。
在选项卡式界面中，一次只能看到一个元素，但是所有选项卡都是可见的。
与手风琴相比，选项卡式界面更具可预测性，因为选项卡(与手风琴的标题不同)位于同一位置。
这些选项卡更改颜色以指示当前突出显示哪个选项卡，并且它们还更改状态(通常通过更改颜色)以指示它们被悬停了。
当您单击另一个选项卡时，小部件的主要内容区域将替换为相应的内容。
这是用户单击选项卡时发生的情况。
像手风琴一样，tab效果非常容易实现。
查看代码：
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8"
<link rel = "stylesheet"
type = "text/css"
href = "css/ui-lightness/jquery-ui-1.10.3.custom.css"
<script type = "text/javascript"
src = "js/jquery-1.9.1.js"></script>
<script type = "text/javascript"
src = "js/jquery-ui-1.10.3.custom.min.js"></script>
<script type = "text/javascript">
$(init);
function init(){
$("#tabs").tabs();
}
</script>
<title>tabs.html</title>
</head>
<body>
<h1 class = "ui-state-default">Tab Demo</h1>
<div id = "tabs">
<ul>
<li><a href = "#book1">Book 1</a></li>
<li><a href = "#book2">Book 2</a></li>
<li><a href = "#book3">Book 3</a></li>
</ul>
<div id = "book1">
<h2>Book I - Creating the HTML Foundation</h2>
<ol>
<li>Sound HTML Foundations</li>
<li>It's All About Validation</li>
<li>Choosing your Tools</li>
<li>Managing Information with Lists and Tables</li>
<li>Making Connections with Links</li>
<li>Adding Images</li>
<li>Creating forms</li>
</ol>
</div>
<div id = "book2">
<h2>Book II - Styling with CSS</h2>
<ol>
<li>Coloring Your World</li>
<li>Styling Text</li>
<li>Selectors, Class, and Style</li>
<li>Borders and Backgrounds</li>
<li>Levels of CSS</li>
</ol>
</div>
<div id = "book3">
<h2>Book III - Using Positional CSS for Layout</h2>
<ol>
<li>Fun with the Fabulous Float</li>
<li>Building Floating Page Layouts</li>
<li>Styling Lists and Menus</li>
<li>Using alternative Positioning</li>
</ol>
</div>
</div>
</body>
</html>
构建基于选项卡的界面的机制与用于手风琴的机制非常相似：
- 添加所有适当的文件。
像大多数jQuery UI效果一样，您需要jQuery，jQuery UI和主题CSS文件。
您还需要访问主题目录背景图片的图像目录。
- 正常构建HTML。
无论如何，如果您正在构建一个组织良好的网页，那么您已经非常接近了。
- 建立一个包含所有选项卡式数据的div。
这就是您要做jQuery魔术的要素。
- 将主要内容区域放在命名的div中。
将要显示为页面的每个内容都应放在具有说明性ID的div中。
这些div中的每一个都应放在选项卡div中。
- 添加到内容的本地链接列表。
建立链接菜单。
将其放在选项卡式div的顶部。
每个链接应该是一个到div的本地链接。
例如，索引如下所示：
- 照常构建init()函数。
使用普通的jQuery技术。
- 在主div上调用tabs()方法。
令人难以置信的是，一行jQuery代码可以完成所有工作。
