41.选项卡插件——tabs

最新推荐文章于 2024-11-14 10:50:04 发布

weixin_33889665

最新推荐文章于 2024-11-14 10:50:04 发布

阅读量57

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/binhuguang/p/4362349.html

版权

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

例如，在页面中，添加选项卡的标题和内容元素，并绑定tabs插件，当点击标题时，以选项卡的方式切内容，如下图所示：

在浏览器中显示的效果：

从图中可以看出，在tabs()方法的配置对象中，通过“fx”属性设置了选项卡切换时的效果，“event”属性设置鼠标也可以切换选项卡，因此，当鼠标在移动至两个选项卡标题时，对应内容以动画的效果自动切换。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <title>选项卡插件</title>
 5         <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
 6         <link href="style.css" rel="stylesheet" type="text/css" />
 7         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
 8         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
 9     </head>
10     
11     <body>
12         <div id="divtest">
13             <div id="tabs">
14                 <ul>
15                     <li><a href="#tabs-1">最爱吃的水果</a></li>
16                     <li><a href="#tabs-2">最喜欢的运动</a></li>
17                 </ul>
18                 <div id="tabs-1">
19                     <p>橘子</p>
20                     <p>香蕉</p>
21                     <p>葡萄</p>
22                     <p>苹果</p>
23                     <p>西瓜</p>
24                 </div>
25                 <div id="tabs-2">
26                     <p>足球</p>
27                     <p>散步</p>
28                     <p>篮球</p>
29                     <p>乒乓球</p>
30                     <p>骑自行车</p>
31                 </div>
32             </div>
33         </div>
34         
35         <script type="text/javascript">
36             $(function () {
37                $("#tabs").tabs ({
38                     //设置各选项卡在切换时的动画效果
39                     fx: { opacity: "toggle", height: "toggle" },
40                     event: "click" //通过移动鼠标事件切换选项卡
41                 })
42             });
43         </script>
44     </body>
45 </html>