首先当然是先引用相关的代码库:
<link href="Scripts/jqueryui/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="Scripts/jqueryui/jquery-ui.js" type="text/javascript"></script>
具体实现:
<script type="text/javascript">
$(function () {
$("#tabs1").tabs();
$("#tabs2").tabs();
})
</script>
<div id="tabs1">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#tabs-4">First</a></li>
<li><a href="#tabs-5">Second</a></li>
<li><a href="#tabs-6">Third</a></li>
</ul>
<div id="tabs-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-5">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-6">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
分享到:
相关推荐
主要介绍了jquery ui 实现 tab标签功能,结合完整实例形式分析了jquery ui 实现 tab标签切换功能的相关操作技巧,需要的朋友可以参考下
本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=[我的首页]; //×号点击关闭li $(#tabs).delegate( .ui-icon-close, click, function() { var panelId = $...
JQueryUI,EasyUI一些控件的使用,表单,tab切换,样式切换等
可以左右滑动的,非常简洁的tab标签切换选项卡代码
• 保持了与jqueryui的完全兼容,可以自行前往www.jqueryui.com网站下载更多酷炫界面风格,甚至自定义风格 • 涉及的PHP代码极少且足够建议,非PHP程序员也能使用 • 对系统要求非常低,只要普通PHP程序能够...
jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...
使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
移动端基于jquery,zepto的UI组件库,目前实现 JS Components:Toast、Action、Tips、Dialog、Swiper、CityPicker、DatetimePicker、Tab、Range Css Component:oneborder、Loading、button 等
一个JqueryUI Tabs插件的扩展 可动态添加或关闭的Tabs插件 已经添加过的Tab,再次添加时候不添加新的,而是选中原来的Tab。
jquery ui例子,包括layout布局.菜单,tab选项卡,与后台交互等...
• 保持了与jqueryui的完全兼容,可以自行前往www.jqueryui.com网站下载更多酷炫界面风格,甚至自定义风格 • 涉及的PHP代码极少且足够建议,非PHP程序员也能使用 • 对系统要求非常低,只要普通PHP程序能够运行即可...
目 录 JQuery教程自学笔记 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 ...3.3.10 JQuery UI Tab (标签页) 103 3.3.11 JQuery UI Tooltip (提示条) 111
基于jquery 、jquery ui 、 jquery ui layout 写的一个后台框架 布局划分上、中左、中右、下,支持切换ui的主题样式,包含了tab button 等
目 录 JQuery教程自学笔记总结 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 ...3.3.10 JQuery UI Tab (标签页) 103 3.3.11 JQuery UI Tooltip (提示条) 111
目 录 JQuery教程自学笔记 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 ...2.2 JQuery事件响应 8 ...3.3.10 JQuery UI Tab (标签页) 103 3.3.11 JQuery UI Tooltip (提示条) 111
完整jQuery LigerUI V1.3.3插件