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, ...
随机推荐
- [转]Python依赖打包发布详细
Python依赖打包发布详细 http://www.cnblogs.com/mywolrd/p/4756005.html 将Python脚本打包成可执行文件 Python是一个脚本语言,被解释 ...
- python if not
判断是否为None的情况 if not x if x is None if not x is None if x is not None`是最好的写法,清晰,不会出现错误,以后坚持使用这种写法. 使用 ...
- 对于使用JDBC连接mysql数据时The server time zone value '¤¤°ê¼Ð·Ç®É¶¡'...的异常问题解决。
相信很多小伙伴和我一样遇到了这类问题,在使用JDBC连接mysql数据库的时候发生SQLException如下所示的异常情况! java.sql.SQLException: The server ti ...
- Linux系统编程——信号
目录 信号的介绍 信号的机制 信号的编号 Linux常规信号一览表 信号的产生 终端按键产生信号 硬件异常产生信号 kill函数/命令产生信号 信号的操作函数 信号集设定 sigprocmask函数 ...
- select函数与I/O多路转接
select函数与I/O多路转接 相作大家都写过读写IO操作的代码,例如从socket中读取数据可以使用如下的代码: while( (n = read(socketfd, buf, BUFSIZE) ...
- WordPress版微信小程序2.2.8版发布
距离上次更新已经一个月了,这期间对WordPress版微信小程序 做的不少小的更新和性能的优化,此次版本更新推出了两个比较重点的功能:点赞和赞赏.同时,优化了文章页面的功能布局,在评论区把常用的功能: ...
- 第一章 FFmpeg简介
1.1 FFmpeg的定义 Fast Forward Moving Picture Experts Group(动态图像专家组) 1.2 FFmpeg的历史 1.3 FFmpeg的基本组成 1 FFm ...
- [HNOI2012]射箭(计算几何）
设抛物线方程\(y = ax^2 + bx\), 那么对于一个靶子\((x_i,y_{down},y_{up})\)我们需要满足的条件就是 \(\frac{y_{down}}{x_i} \leq ax ...
- 【亲测】502 Bad Gateway 怎么解决？
502 Bad Gateway 怎么解决? 1.什么是502 badgateway 报错 简单来说 502 是报错类型代码,bad gateway 错误的网关. 2.产生错误的原因 连接超时 具体原因 ...
- form转化json
;(function($){ /** * 依赖jquery-1.4.2 * 依赖jquery.json-2.2,参考http://code.google.com/p/jquery-json/ * 用于 ...