您的位置：首页 > Web前端 > JQuery

《jQuery从入门到精通》第三十一节 TAB标签控件

2018-02-10 17:16 169 查看

10.4 TAB标签控件

在一些漂亮的网站中，经常会出现能够切换的菜单，其实，这些控件就是TAB。有了这个组件，在页面的布局中，开发者就能够有更好丰富内容，并且运用TAB标签也能使开发出来的网站更加美观，大方。这一节，介绍jQuery UI中TAB控件的使用方法。

10.4.1  应用实例

Tab这个标签一般情况下把一个大的主题，分级为几个小的区域，通过切换来实现不同区域内容的显示，这个效果和后面将要讲解的Accordion的效果差不多。下面来看一个实例吧。
【范例10-6  Tab应用实例】
01  <!DOCTYPEhtml>
02  <html>
03     <head>
04     <metacharset="utf-8">
05     <link href="jquery-ui.css"rel="stylesheet" type="text/css"/>
06     <link href="jquery.ui.tabs.css"rel="stylesheet" type="text/css"/>
07     <scriptsrc="jquery-1.9.1.js"></script>
08     <scriptsrc="jquery-ui.js"></script>
09     <script>
10          $(document).ready(function() {      //页面加载执行该方法
11          $("#tabs").tabs();                  //调用tabs()方法
12          });
13     </script>
14     </head>
15     <bodystyle="font-size:62.5%;">
16     <divid="tabs">
17         <ul>
18           <li><a href="#fragment-1"><span>项目1</span></a></li>
19           <li><a href="#fragment-2"><span>项目2</span></a></li>
20           <li><a href="#fragment-3"><span>项目3</span></a></li>
21         </ul>
22         <div id="fragment-1">
23             asp.net网站
24         </div>
25         <div id="fragment-2">
26           Android软件
27         </div>
28         <div id="fragment-3">
29           C#应用
30         </div>
31     </div>
32  </body>
33  </html>
效果如图10-11所示。
 

图10-11 Tab应用实例
当然标题栏不仅可以放到上面，也可以放到下侧和左侧。

10.4.2  注意HTML结构

对于jQuery UI中Tabs这个组建，在html中应该注意的一点就是，<li></li>标签中套的是一个超链接，里面放的题目，例如图10-10中的“项目1”。还有一点很重要，<a></a>中应用的链接一定要和<div></div>中的id是一致的，这样才可以题目对应内容。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航