如何在AJAX中构建选项卡接口，用于HTML5和CSS3编程
时间：2020-02-23 14:28:40 来源:igfitidea点击:
HTML5和CSS3 Web开发中的一个重要技术是在AJAX中使用选项卡接口。
这允许用户通过选择一系列标签之一来改变段的内容。
在选项卡式界面中，一次只能看到一个元素，但标签全部可见。
选项卡式界面比手风琴更可预测，因为标签(与手风琴的标题不同)保持在同一个地方。
标签更改颜色以指示当前突出显示的选项卡，并且它们还会更改状态(通常通过更改颜色)以指示它们正在悬停过来。
单击另一个选项卡时，窗口小部件的主要内容区域将替换为相应的内容。
这是用户单击选项卡时会发生什么。
像手风琴一样，标签效果非常易于实现。
查看代码：
<!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魔法的元素。将主要内容区域放在名为divs中。
每个将显示为页面的内容应放置在具有描述ID的DIV中。这些Div中的每一个都应放在标签Div中。添加一个本地链接列表到内容。
构建链接菜单。将此放在标签垫的顶部。每个链接应该是其中一个div的本地链接。例如，索引如下所示：
<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>
像往常一样构建init()函数。
使用普通的jQuery技术。调用主div上的标签()方法。
令人难以置信的是，一行jQuery代码做了所有的工作。
