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+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现简单日历效果
Jul 05 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)
2013/06/21 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP多进程简单实例小结
2019/11/09 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
js微信分享API
2020/10/11 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
python 切片和range()用法说明
2013/03/24 Python
Django与JS交互的示例代码
2017/08/23 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python3大文件解压和基本操作
2017/12/15 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python中pyplot基础图标函数整理
2020/11/10 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
干部培训自我鉴定
2014/01/22 职场文书
期中考试后的反思
2014/02/08 职场文书
保险经纪人求职信
2014/03/11 职场文书
促销活动计划书
2014/05/02 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
消防安全主题班会
2015/08/12 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python