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, ...
随机推荐
- SqlDbx 个人版本使用指定的instant client
set Oracle_Home=D:\Toolkit\Oracle kits\instantclient_x86 set TNS_ADMIN=%Oracle_Home% set NLS_LANG=SI ...
- [UE4]Menu Anchor，菜单锚点
一.想要弹出某个菜单的时候,Menu Anchor可以做为菜单弹出的位置. 二.Menu Anchor本身不显示任何东西 三.Menu Class:选择要弹出的UI,可以是任意的UserWidget ...
- Java笔试面试题整理第四波
转载至:http://blog.csdn.net/shakespeare001/article/details/51274685 作者:山代王(开心阳) 本系列整理Java相关的笔试面试知识点,其他几 ...
- eclipse常用快捷键整理
Ctrl + F11 按上次方式执行 Ctrl + Shift + / 加上注释/**/ Ctrl + Shift + \ 取消注释/**/ Ctrl + / 加上或消除行注释 Ctrl + D 删除 ...
- Redis梳理
- ubuntu搭建php开发环境记录
这两天自己在阿里云上面买了一个ecs,系统选的是ubuntu16.04,第一件事就是先搭环境,这次准备使用lamp组合. Apache安装 首先安装apache服务器,ubuntu下面使用apt-ge ...
- lvm管理：扩展lv、删除pv、lv等
从卷组VG里扩展lv.删除pv,并删除物理卷PV 一.扩展LV.缩小LV 1.卸载LV 命令:umount "挂载目录" 2.扩展LV 命令:lvextend -L +500m ...
- Maven私服(Nexus)资源上传下载
1.settings.xml (向私服上传资源需要) <!-- Snapshot包的管理/Releases包的管理/第三方包管理--> <server> <id>l ...
- Sql入门学习——基本语法函数
--------使用工具navicat 快捷键操作 --------基本操作DML &DDL --------运算比较 --------数据类型 --------常用函数 --------常用 ...
- 学习node.js 第1篇 介绍nodejs
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...