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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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
dedecms系统常用术语汇总
2007/04/03 PHP
php下通过POST还是GET来传值
2008/06/05 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
JSON无限折叠菜单编写实例
2013/12/16 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
js实现日历与定时器
2017/02/22 Javascript
深入探究node之Transform
2017/07/20 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
使用django自带的user做外键的方法
2020/11/30 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
药学专业个人自我评价
2013/11/11 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
出纳员岗位责任制
2014/02/11 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
班级年度安全计划书
2014/05/01 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis