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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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 rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
js 编写规范
2010/03/03 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Unicode和Python的中文处理
2017/03/19 Python
Python中文件的读取和写入操作
2018/04/27 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
安全大检查反思材料
2014/01/31 职场文书
活动倡议书范文
2014/05/13 职场文书
批评与自我批评总结
2014/10/17 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android