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, ...
随机推荐
- Lucene的基本使用
1.了解搜索技术 2.搜索引擎的原理 索引:类似于书的目录 3.实现搜索技术的方式 方式1:数据库搜索 利用SQL语句进行模糊搜索: select * from items where title l ...
- oData 排序字段生成
跟踪SQL 发现生成的SQL中所有的字段都进行了排序,查看OData原代码,发现如果实体有Key,就按照Key asc 加上指定字段进行排序 属性 EnsureStableOrdering可以控制是否 ...
- ROS Qt Creator Plug-in wiki
在Qt中配置ros工程. 环境: ubuntu16.04: ros kinetic: Qt5.7 参考网址: https://ros-industrial.github.io/ros_qtc_plug ...
- localStorage小结
使用HTML5可以在本地存储用户的浏览数据.. 什么是 HTML5 Web 存储? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie ...
- 【剑指offer】链表第一个公共子结点
*思路: 先求得两个链表的长度,然后得到长度差diff,再先遍历长链表diff步后,再同时遍历两个链表并比较对象指针. /* public class ListNode { int val; List ...
- 数据库SQL语言学习----左外连接，右外连接，外连接，自然连接的形象对比
现在有两张表,一张Student 另一张Score 1.查询每个学生及其选修课程的情况: 自然连接,Sno在Cscore中找不到就不显示,Cno在Cscore中找不到也不显示 SELECT Stu ...
- Android Studio指定引用jnilibs 特定CPU架构的so库文件
稍微大一些的项目都会用到第三方库,所以不可避免的会有针对不同手机cpu架构的.so库文件 'x86', 'x86_64', 'mips', 'mips64' 'armeabi' ,'armeabi- ...
- Master公式计算递归时间复杂度
我们在算递归算法的时间复杂度时,Master定理为我们提供了很强大的便利! Master公式在我们的面试编程算法中除了BFPRT算法的复杂度计算不了之外,其他都可以准确计算! 这里用求数组最大值的递归 ...
- 构建一个Vue项目
一 我们需要安装vue.js Vue.js官网 当我们已经安装了vue-cli,那么我们需要更新Vue-cli. vue-cli3.0使用及配置 二 安装好了之后: 我们可以直接使用命令:mkdir ...
- Oracle 学习笔记（六）
Oracle 数据库常用的闪回sql 语句及其它操作语句: --Oracle 数据库dml sql -- 查看当前用户所拥有的表 select * from tab; --表空间,auto: 自动管理 ...