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, ...
随机推荐
- Delphi 10-10.2.2启动提示JS错误的解决办法
HKEY_CURRENT_USER\SOFTWARE\Embarcadero\BDS\18.0\Known IDE Packages\ $(BDS)\Bin\CommunityToolbar240.b ...
- 使用Java监控工具出现 Can't attach to the process
问题重现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ➜ jinfo -flags 3032 Attaching ...
- Python-用户登录三次错误锁定
黑名单:blacklist.txt 用户名单:username_password.py # Author:Stephen Yuan # 用户名和密码 username_password = { ', ...
- Spring Boot探究之旅--启动分析
刚接触SpringBoot,感觉挺方便的,不用配置那么多乱七八糟的配置,很方便!酒饱思淫欲,得陇望蜀一下,看看SpringBoot到底怎么做到这么方便的. 首先呢,先来看个SpringBoot的hel ...
- mysql5.7.18.1修改用户密码报错ERROR 1054 (42S22): Unknown column 'password' in 'field list'解决办法
本意向修改一个用户的密码,网上搜到的命令为如下 mysql> update user set password=password(“新密码”) where user=”用户名”; 执行后报错 E ...
- 保持ssh连接长时间不断开的技巧
我经常用ssh连接服务器,过段时间不用, 需要恢复一下断开的连接, 原因是NAT防火墙喜欢对空闲的会话进行超时处理,以确保它们状态表的干净和内存的低占用率,因为 长时间保持连接, 会长期占用部分系统资 ...
- __get__ __set__ __delete__描述符
描述符就是一个新式类,这个类至少要实现__get__ __set__ __delete__方法中的一种class Foo: def __get__(self, instance, owner): pr ...
- 资产管理平台 glpi
1.安装apache yum install httpdyum install httpd-devel 2.安装php 3.配置apache支持php 4.下载glpi并解压 5.配置apache 6 ...
- Linux常用基础操作命令大全（超实用精心整理）
相信大家都对黑客那种只用命令行对电脑操作的风格惊呆了,其实你也可以做到.linux是一款不同于windows的操作系统,而且它是黑客.渗透人员.运维人员等等必会的.如果你想学习,小编下面整理的命令将会 ...
- wheel
http://guoqiao.me/post/2015/1212-pip-install-offline-via-wheels python wheel -r requirements.txt 下载 ...