jquery ui 实现 tab标签功能示例【测试可用】


Posted in jQuery onJuly 25, 2019

本文实例讲述了jquery ui 实现 tab标签功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <title>3water.com tab切换</title>
  <style type="text/css">
   #tabs{
    width:500px;
    height:500px;
    margin:0 auto;
   }
   .ui-widget-header{
    border:1px solid grey;
    background:grey;
    color:#fff;
    font-weight:bold;
   }
  </style>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.css" rel="external nofollow" media="screen"/>
  <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>
 </head>
 <body>
  <div id="tabs">
  <ul>
   <li><a href="#tabs-1" rel="external nofollow" >first tab</a></li>
   <li><a href="#tabs-2" rel="external nofollow" >second tab</a></li>
  </ul>
  <div id="tabs-1">
   <p>this is the first tab</p>
  </div>
  <div id="tabs-2">
   <p>this is the second tab</p>
  </div>
  </div>
  <script>
   $(function(){
   $("#tabs").tabs();
   });
  </script>
</body>
</html>

运行效果:

jquery ui 实现 tab标签功能示例【测试可用】

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中的deferred使用方法
Mar 27 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
jquery插件开发模式实例详解
Jul 20 #jQuery
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
You might like
php合并js请求的例子
2013/11/01 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
js分页代码分享
2014/04/28 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
用Python抢过年的火车票附源码
2015/12/07 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python基于递归解决背包问题详解
2019/07/03 Python
python requests指定出口ip的例子
2019/07/25 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
高中生物教学反思
2014/02/05 职场文书
住宅质量保证书
2014/04/29 职场文书
三八妇女节主持词
2015/07/04 职场文书
女儿满月酒致辞
2015/07/29 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python