tab选项卡实例
之前也见了不少的tab选项卡，但是下面这个选项卡是一个页面中有多个时互不影响的。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Open on mouseover</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
} );
$( function() {
$( "#tabs1" ).tabs({
event: "mouseover"
});
} );
$( function() {
$( "#tabs2" ).tabs({
event: "mouseover"
});
} );
</script>
</head>
<body> <div id="tabs">
<ul>
<li><a href="#tabs-1">COSW 10</a></li>
<li><a href="#tabs-2">COSW 20</a></li>
<li><a href="#tabs-3">COSW 200</a></li> </ul>
<div id="tabs-1">
<h3>COSW 10: Beginning Website Development</h3>
<p>This course introduces the fundamental skills needed to design, develop and publish websites using industry standard software. Students will create websites using HTML and CSS and incorporate web design principles such as site planning, usability and accessibility standards.</p>
<p>Topics covered include formatting text, creating hyperlinks, building navigation menus, inserting images and other media, creating tables and forms, using CSS for layout and design, creating responsive websites and working with content management systems. Students should have completed a basic computer concepts course such as COSA 1 as preparation for this course.</p>
</div>
<div id="tabs-2">
<h3>COSW 20: Advanced Website Development</h3>
<p>This course is an web page construction course focusing on emerging HTML standards, XML, JavaScript and other scripting languages. Students should already have a basic knowledge of web design such as from COSW 10AD in preparation for taking this course.</p>
</div>
<div id="tabs-3">
<h3>COSW 200: Introduction to JavaScript and jQuery</h3>
<p>This course provides an overview of client-side programming using JavaScript, variables, arrays, functions, event handlers, objects, form validation, cookies, and the DOM. Introduces Web 2.0 technologies, Ajax (Asynchronous JavaScript and XML and JSON), and it is a introduction to using popular libraries like JQuery.</p>
</div>
</div>
<div id="tabs1">
<ul>
<li><a href="#tabs1-1">COSW 10</a></li>
<li><a href="#tabs1-2">COSW 20</a></li>
<li><a href="#tabs1-3">COSW 200</a></li> </ul>
<div id="tabs1-1">
<h3>COSW 10: Beginning Website Development</h3>
<p>This course introduces the fundamental skills needed to design, develop and publish websites using industry standard software. Students will create websites using HTML and CSS and incorporate web design principles such as site planning, usability and accessibility standards.</p>
<p>Topics covered include formatting text, creating hyperlinks, building navigation menus, inserting images and other media, creating tables and forms, using CSS for layout and design, creating responsive websites and working with content management systems. Students should have completed a basic computer concepts course such as COSA 1 as preparation for this course.</p>
</div>
<div id="tabs1-2">
<h3>COSW 20: Advanced Website Development</h3>
<p>This course is an web page construction course focusing on emerging HTML standards, XML, JavaScript and other scripting languages. Students should already have a basic knowledge of web design such as from COSW 10AD in preparation for taking this course.</p>
</div>
<div id="tabs1-3">
<h3>COSW 200: Introduction to JavaScript and jQuery</h3>
<p>This course provides an overview of client-side programming using JavaScript, variables, arrays, functions, event handlers, objects, form validation, cookies, and the DOM. Introduces Web 2.0 technologies, Ajax (Asynchronous JavaScript and XML and JSON), and it is a introduction to using popular libraries like JQuery.</p>
</div>
</div> <div id="tabs2">
<ul>
<li><a href="#tabs2-1">COSW 10</a></li>
<li><a href="#tabs2-2">COSW 20</a></li>
<li><a href="#tabs2-3">COSW 200</a></li> </ul>
<div id="tabs2-1">
<h3>COSW 10: Beginning Website Development</h3>
<p>This course introduces the fundamental skills needed to design, develop and publish websites using industry standard software. Students will create websites using HTML and CSS and incorporate web design principles such as site planning, usability and accessibility standards.</p>
<p>Topics covered include formatting text, creating hyperlinks, building navigation menus, inserting images and other media, creating tables and forms, using CSS for layout and design, creating responsive websites and working with content management systems. Students should have completed a basic computer concepts course such as COSA 1 as preparation for this course.</p>
</div>
<div id="tabs2-2">
<h3>COSW 20: Advanced Website Development</h3>
<p>This course is an web page construction course focusing on emerging HTML standards, XML, JavaScript and other scripting languages. Students should already have a basic knowledge of web design such as from COSW 10AD in preparation for taking this course.</p>
</div>
<div id="tabs2-3">
<h3>COSW 200: Introduction to JavaScript and jQuery</h3>
<p>This course provides an overview of client-side programming using JavaScript, variables, arrays, functions, event handlers, objects, form validation, cookies, and the DOM. Introduces Web 2.0 technologies, Ajax (Asynchronous JavaScript and XML and JSON), and it is a introduction to using popular libraries like JQuery.</p>
</div>
</div> </body>
</html>
tab选项卡实例的更多相关文章
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- 面向对象的tab选项卡实现
利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图:
- mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小
在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...
- ionic-CSS：ionic tab(选项卡)
ylbtech-ionic-CSS:ionic tab(选项卡) 1.返回顶部 1. ionic tab(选项卡) ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换.它可以 ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...
- 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
随机推荐
- [zz]蟑螂蚂蚁蚊子已不住在我家了！这个方法100%见效…
http://mt.sohu.com/20150324/n410238511.shtml 蚂蚁怕酸,蚊子怕辣,蟑螂怕香.在下给各位提供一个不杀生又能驱赶蚂蚁.蚊子.蟑螂的妙法. 一.蚂蚁怕酸味 家里的 ...
- vscode编辑Markdown时的贴图工具
参看 https://www.jianshu.com/p/74b960efb697 说明: 1. 文件-->首选项-->设置-->填入paste,设置Path值为 ${current ...
- 【python】变量的赋值、深浅拷贝
python——赋值与深浅拷贝 https://www.cnblogs.com/Eva-J/p/5534037.html 啥都不说,看这个博主的文章!
- DotNetBar中Supergrid显示树形数据
1.向窗体中拖一个Supergrid控件 2.添加列ID,NAME,MATH,CN,SEX 3.在任务窗格中勾选“Show Tree Lines”和“Show Tree Buttons” 4.添加数据 ...
- 20165312 2017-2018-2 《JAVA程序设计》第3周学习总结
20165312 2017-2018-2 <JAVA程序设计>第3周学习总结 一.第四章知识点总结 1.类 类的实现包括两个部分:类声明和类体. class是关键字,用来定义类. clas ...
- SHFileOperation 解决double-null terminated
void rubyTools::funStrToWstr(string str, wstring& strw) { const char* pData = str.c_str(); int l ...
- 堆排序（Heapsort）
class Program { static void Main(string[] args) { , , , , , ,}; int size = arr.Length; Heapsort(arr, ...
- QTP 学习 - 检查点
- PHP判断手机、电脑访问
/*判断用户是手机访问还是电脑访问*/$useragent = $_SERVER['HTTP_USER_AGENT']; if (preg_match('/(android|bb\d+|meego). ...
- django之normalize函数的功能
from django.utils.regex_helper import normalize pat=r'^(?P<id>\d+)/(?P<name>\d+)$' bits= ...