使用选项卡插件可以将<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. 介绍DSA数字签名，非对称加密的另一种实现

    接下来我们介绍DSA数字签名,非对称加密的另一种实现. DSA DSA-Digital Signature Algorithm 是Schnorr和ElGamal签名算法的变种,被美国NIST作为DSS ...

  2. mod-mono

    http://go-mono.com/config-mod-mono/  配置文件生成器 Mono remote debugging from Visual Studio http://stackov ...

  3. mysql优化记录

    老板反应项目的反应越来越慢,叫优化一下,顺便学习总结一下mysql优化. 不同引擎的优化,myisam读的效果好,写的效率差,使用场景 非事务型应用只读类应用空间类应用 Innodb的特性,innod ...

  4. sicp-py

    第一章 在第一章中,我们专注于计算过程,以及程序设计中函数的作用.我们看到了如何使用原始数据(数值)和原始操作(算术运算),如何通过组合和控制来形成复合函数,以及如何通过给予过程名称来创建函数抽象.我 ...

  5. [译]使用branch

    这篇文章将介绍Git分支. 首先, 看看如果创建分支, 这就像是request一个新的项目历史. 接着, 来看看git checkout是如果能被用来选择一个分支的. 最后, 学习用git merge ...

  6. [Git] Git基础

    远程仓库 查看远程仓库: git remote -v 添加远程仓库: git remote add <repoName> <url> 拉取远程仓库数据: git fetch & ...

  7. java基础知识（一）数据类型（下）

    前面介绍了java的8种基本数据类型,包括boolean, byte, char, short,  int, long, float, double.同时,java也提供了这些类型的封装类,分别为Bo ...

  8. How do I enable log4net internal debugging?

    http://logging.apache.org/log4net/release/faq.html

  9. phpcookie类

    1.需求 写一个cookie类 2.例子 <?php class cookie{ private $COOKIE_PREFIX = ""; private $COOKIE_E ...

  10. PHPExcel yii2 加载使用

    除了用composer 包管理组件的方式外 我们还可以使用 直接最原始的加载方式---超级简单 1.PHPExcel上下载最新的PHPExcel http://phpexcel.codeplex.co ...