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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>选项卡插件</title>

        <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />

        <link href="style.css" rel="stylesheet" type="text/css" />

        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>

        <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>

    </head>

    <body>

        <div id="divtest">

            <div id="tabs">

                <ul>

                    <li><a href="#tabs-1">最爱吃的水果</a></li>

                    <li><a href="#tabs-2">最喜欢的运动</a></li>

                </ul>

                <div id="tabs-1">

                    <p>橘子</p>

                    <p>香蕉</p>

                    <p>葡萄</p>

                    <p>苹果</p>

                    <p>西瓜</p>

                </div>

                <div id="tabs-2">

                    <p>足球</p>

                    <p>散步</p>

                    <p>篮球</p>

                    <p>乒乓球</p>

                    <p>骑自行车</p>

                </div>

            </div>

        </div>

        <script type="text/javascript">

            $(function () {

               $("#tabs").tabs ({

                    //设置各选项卡在切换时的动画效果

                    fx: { opacity: "toggle", height: "toggle" },

                    event: "click" //通过移动鼠标事件切换选项卡

                })

            });

        </script>

    </body>

</html>

jQuery插件（选项卡）的更多相关文章

  1. 使用自定义 jQuery 插件的一个选项卡Demo

    前几天闲着没事,想着编写一个 jQuery 插件,或许这将是一个美好的开始. 这里是html页面: <!DOCTYPE html> <html lang="en" ...

  2. jquery插件之选项卡

    jQuery插件编写 首先来一个简拓展jQuery对象的方法 <body > <p>23</p> <script src="js/jquery-1. ...

  3. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

  4. 40个让你的网站屌到爆的jQuery插件

    一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...

  5. 常用Jquery插件整理

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  6. 自己动手开发jQuery插件

    因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...

  7. 常用JQuery插件

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  8. 关于jquery插件 入门

    关于 JavaScript & jQuery 的插件开发   最近在温故 JavaScript 的面向对象,于是乎再次翻开了<JavaScript高级程序设计>第3版,了解到其中常 ...

  9. 2013年优秀jQuery插件

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...

  10. 一些常用的jQuery插件

    1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js ...

随机推荐

  1. 使用mosh取代ssh提高n2n网络连接稳定性

    上文实现了远程n2n访问树莓派,但是ssh协议在网络状况不好的时候命令会卡住.这里发现了一个mosh协议,可以增强稳定性,使用后效果明显. 背景:使用n2n之后,在比较差的网络环境下,经常会被time ...

  2. 如何用java自带的工具生成证书

    一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...

  3. 简单的STM32 汇编程序—闪烁LED

    要移植操作系统,汇编是道不得不跨过去的坎.所以承接上篇的思路,我准备用汇编写一个简单的闪烁LED灯的程式.以此练习汇编,为操作系统做准备. 第一步,还是和上篇一样,建立一个空的文件夹. 第二步,因为是 ...

  4. 深入理解javascript原型和闭包（9）——简述【执行上下文】下

    继续上一篇文章(http://www.cnblogs.com/wangfupeng1988/p/3986420.html)的内容. 上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如何数据: ...

  5. [NHibernate]O/R Mapping基础

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) 引言 对象和关系数据库 ...

  6. [CentOs7]搭建ftp服务器

    摘要 vsftpd 是“very secure FTP daemon”的缩写,安全性是它的一个最大的特点.vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行在诸如 Linux. ...

  7. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

  8. read name 和 read 在 Bash 中的区别

    read 带一个参数和不带参数的区别是什么,我本以为仅仅是被赋值的变量的名字不同而已: $ read name 1 $ echo "$name" 1 $ read 1 $ echo ...

  9. （转载）JavaWeb学习总结(五十三)——Web应用中使用JavaMail发送邮件

    博客源地址:http://www.cnblogs.com/xdp-gacl/p/4220190.html 现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件 ...

  10. Coursera-Getting and Cleaning Data-week4-R语言中的正则表达式以及文本处理

    博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html Thursday, January 29, 2015 补上第四周笔记,以及本次课程总结. 第四周 ...