1.tab使用

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>jQuery UI Tabs - Default functionality</title>
  7.   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  8.   <link rel="stylesheet" href="/resources/demos/style.css">
  9.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  10.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  11.   <script>
  12.   $( function() {
  13.     $( "#tabs" ).tabs();
  14.   } );
  15.   </script>
  16. </head>
  17. <body>
  18.  
  19. <div id="tabs">
  20.   <ul>
  21.     <li><a href="#tabs-1">Nunc tincidunt</a></li>
  22.     <li><a href="#tabs-2">Proin dolor</a></li>
  23.     <li><a href="#tabs-3">Aenean lacinia</a></li>
  24.   </ul>
  25.   <div id="tabs-1">
  26.     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  27.   </div>
  28.   <div id="tabs-2">
  29.     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  30.   </div>
  31.   <div id="tabs-3">
  32.     <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
  33.     <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  34.   </div>
  35. </div>
  36.  
  37. </body>
  38. </html>

jquery UI_tabs的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

随机推荐

  1. 【解决】client does not support authentication

    cmd窗口登陆mysql: C:\Users\Administrator>  sqlplus  /nolog mysql>  conn / as sysdba; mysql> alt ...

  2. Python包管理工具setuptools之setup函数参数详解

    **********************************************************对所学内容的简单汇总******************************** ...

  3. 如何给自己的开源项目选择和添加 License

    License 的作用:开源 == 为所欲为? 开源并不等于为所欲为! 代码的用途,修改之后的代码有什么要求,开源程序对于原作者的权利和责任等等,都是需要明确的. 开源协议 License 就是这么一 ...

  4. jmeter-CSV Data Set Config

    在使用Jemeter测试的时候,往往需要参数化用户名,密码以到达到多用户使用不同的用户名密码登录的目的.这个时候我们就可以使用CSV Data Set Config实现参数化登录: 首先通过Test ...

  5. Unity---UNet学习(1)----基本方法介绍

    目录 1.Network Manager 2.Network Manager HUD 3.Network Identity 4.Network Transform 5.特性 1.Network Man ...

  6. 利用docker部署redis集群

    目录 一.首先配置redis.conf文件,... 1 1.获取配置文件... 1 2.修改各配置文件的参数... 2 二.下载redis镜像.启动容器... 2 1.创建网络... 2 2.拉取镜像 ...

  7. 洛谷P2826 LJJ的数学课

    题目背景 题目描述(本题是提高组第二题难度+) 题目描述 \(LJJ\)又要开始上数学课啦!(\(T1\),永恒不变的数学) \(LJJ\)的\(Teacher\)对上次的考试很不满意(其实是出题人对 ...

  8. thinphp5会员注册邮箱验证

    1.首先完成邮箱发送http://www.cnblogs.com/jcydd/p/7299750.html 2.在完成会员新增后执行后置函数,在模型类当中 //注册后置函数 protected sta ...

  9. EIGRP-5-EIGRP数据包格式

    EIGRP数据包直接承戟在IP数据包中.协议号为88.EIGRP数据包的最大长度取决于具体接口上的最大IP MTU设置——通常完整IP数据包为1500字节.其中1480字节可以用于 EIGRP数据包. ...

  10. jmeter 签名MD5生成（转）

    请求接口需要同时发送签名,签名定义为: 可以看出签名就是把用户的密码 .用户名 和签名key生成一个md5串就可以了 刚好jmeter 有个md5 生成,生成前需要获取name ,password k ...