JQuery - Tab Control
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body> <div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div> </body>
</html>
JQuery - Tab Control的更多相关文章
- 给大家分享一个jQuery TAB插件演示
jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...
- 简单的jquery tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery tab 插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MFC编程 | tab control控件的使用
因为课程需要,会用到MFC编程,所以讲一些经验总结下,以便日后使用查询. // tab control控件的使用 // 建立一个Cluster窗口,通过tab可以切换成C-Means和Fuzzy C- ...
- jquery tab
jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 20 个最棒的 jQuery Tab 插件
jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...
- jquery Tab默认情况下自动切换
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...
- 在VC++中使用Tab Control控件
系统环境:Windows 7软件环境:Visual Studio 2008 SP1本次目的:在模态或非模态对话框中使用Tab Control控件,及引申在单/多文档中使用 查阅MSDN文档,对于创建T ...
- VC中Tab control的用法
1. 新建一个MFC工程, 取名MyTab, 选择Dialog based, 然后Finish. 2. 删除对话框上默认添加的三个控件. 添加Tab Control控件并在Property属性中设置I ...
随机推荐
- mark一下总是记混的重定向与转发的区别
forward内部跳转 和redirect重定向跳转的区别 1).从地址栏显示来说 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发 ...
- python 集合清空
setp = set(["Red", "Green"]) setq = setp.copy() print(setq) setp.clear() print(s ...
- JavaScript中对象数组 作业题目以及作业
var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, gender, age, salary) { t ...
- 通过 sqldf 包使用 SQL 查询数据框
在前面的章节中,我们学习了如何编写 SQL 语句,在关系型数据库(如 SQLite 和MySQL )中查询数据.我们可能会想,有没有一种方法,能够直接使用 SQL 进行数据框查询,就像数据框是关系型数 ...
- docker 出现 Error response from daemon
第一步:通过dig @114.114.114.114 registry-1.docker.io找到可用IP navy@deepin:~/Desktop$ dig @.docker.io ; <& ...
- TinyXML用法小结2
参考:http://www.cnblogs.com/hgwang/p/5833638.html TinyXML用法小结 1. 介绍 Tinyxml的官方网址:http://www.grinn ...
- [ios][switf]页面跳转
参考:http://bbs.csdn.net/topics/390899712 注意用push会崩溃 用其他的正常 1.storyboard直接拖拉,使用不同种类的segue均可2.直接写代码: // ...
- Fragment 的生命周期及使用方法详解
Fragment 的基础知识介绍 1.1 概述 1.1.1 特性 By hebang32624 Fragment 是 activity 的界面中的一部分或一种行为.可以把多个 Fragment 组合到 ...
- String字符串存入数据库中超出最大长度（oracle varchar2 4000）？应合理分条存储（java实现-工具/方法）
问题描述 需要向数据库中保存数据,但某个字段内容长度过长(有中文.符号.英文),应该根据字符串内容与数据库存储上限合理设置储存方式. 解决思路 分条存储,即多条数据前n个字段一致,最后内容字段不同,下 ...
- php入门之数据类型
String(字符串), Integer(整型), Float(浮点型), Boolean(布尔型), Array(数组), Object(对象), NULL(空值),资源. 返回类型 getType ...