使用选项卡插件可以将<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. mysql 函数 GROUP_CONCAT 单元格中最长字符串和excel导出问题

    GROUP_CONCAT 使用方式GROUP_CONCAT ([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔符']) SELECT ...

  2. centos ab命令安装

    yum install apr-util -ymkdir abcd abyum -y install yum-utils -yyumdownloader httpd yum localinstall ...

  3. 10月25日上午PHP继承多态

    概念:子类可以继承父类的一切 方法重写:在子类里面对父类的方法进行重写,实现自己独特的功能.特点:单继承:一个子类只能有一个父类,一个父类可以派生出多个子类.override重写(子类对父类的重写) ...

  4. mui jquery 同时使用

    (function ($, doc, $$) { $.init(); $.ready(function () { var cityPicker = new $.PopPicker({ layer: } ...

  5. [转]Oracle存在则更新，不存在则插入

    原文:http://hi.baidu.com/mawf2008/item/eec8c7ad1c5be5ae29ce9da6 merge into a using bon (a.a=b.b)when m ...

  6. NGUI 学习笔记

    1.NGUI中UI的深度关系(新版NGUI 3.9): 在同一个Panel中,不管同不同Altas,各个UI的顺序受Depth影响 在不同Panel中,UI的顺序受Panel的Depth影响 例如Pa ...

  7. Android 实现分页（使用TabWidget/TabHost）

    注:本文为转载,但该内容本人已亲身尝试,确认该方法可行,代码有点小的改动,转载用作保存与分享. 原作者地址:http://gundumw100.iteye.com/blog/853967 个人吐嘈:据 ...

  8. 布局之按钮的图片分辨率--Android Studio

    在布局页面,想把取消按钮和确认钮大小一致,刚开始想法是错的,不用在控制层设置,也不用在布局层压缩图片,有两个方法法: 1.直接用美图秀秀“尺寸”功能,修改成另一按钮一样的分辨率. 2.设置按钮相同高度 ...

  9. [Scala] Scala基础知识

    Object An object is a type of class that can have no more than one instance, known in object-oriente ...

  10. Go - 项目收藏

    谷歌官方维护了一个基于go语言的开源项目列表: https://github.com/golang/go/wiki/Projects Web框架 web.go.beego Go项目 httpmq:A ...