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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
如何高效使用Python字典的方法详解
2017/08/31 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python实现微信小程序自动回复
2018/09/10 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Python加速程序运行的方法
2020/07/29 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL