这里演示如何使用 HTML 和 CSS 实现 Tab 页的效果。
1. HTML 内容如下, 包含3个Tab页, 分别为Tab_1, Tab_2, Tab_3
<ul id="tabList"> <li><a href="#" tabId="tab_1">Tab_1</a></li> <li><a href="#" tabId="tab_2">Tab_2</a></li> <li><a href="#" tabId="tab_3">Tab_3</a></li> </ul> <div id="tabContents"> <div id="tab_1">This is tab1 page.</div> <div id="tab_2">This is tab2 page.</div> <div id="tab_3">This is tab3 page.</div> </div>
2. CSS 样式如下:
<style type="text/css"> #tabList { margin-bottom: 0px; /* 将 tab 头的下边距设置为0 */ } #tabList li { display: inline; /* 将 li 元素由纵向排列修改为横向排列 */ } #tabList li a { border: 1px solid #66BBE8; /* 给 a 元素添加边框 */ padding: 3px 50px; /* 设置 a 元素的内边距 */ } #tabList li a:link, #tabList li a:visited { color: #0000F0; /* 设置超链接的颜色 */ text-decoration: none; /* 去掉超链接的下划线 */ } #tabList li a.linkSelected { font-size: 120%; /* 选中时字体增大 */ padding-top: 5px; /* 选中时上边距增大到5px */ background: #FFFFFF; /* 选中时的背景颜色 */ border-bottom: none; /* 取消下边框 */ } #tabList li a.linkUnselected { background: #DFE8F6; /* 未选中时的背景颜色 */ border-bottom: 1px solid #DFE8F6; /* 未选中时的下边框 */ } #tabContents { padding: 10px 20px; /* tab 页内容的内边距 */ border-top: 1px solid #66BBE8; /* tab 页内容的上边距 */ } </style>
3. javascript 代码如下:
<script type="text/javascript"> var tabLinks = null; function initTabs(tabListId, selectedTabId) { tabLinks = document.getElementById(tabListId).getElementsByTagName("a"); var link, tabId, tab; for (var i = 0; i < tabLinks.length; i++) { link = tabLinks[i]; tabId = link.getAttribute("tabId"); tab = document.getElementById(tabId); if (tabId == selectedTabId) { tab.style.display = "block"; link.className = "linkSelected"; } else { tab.style.display = "none"; link.className = "linkUnselected"; } link.onclick = function() { var currTabId = this.getAttribute("tabId"); var tmpLink, tmpTabId, tmpTab; for (var j = 0; j < tabLinks.length; j++) { tmpLink = tabLinks[j]; tmpTabId = tmpLink.getAttribute("tabId"); tmpTab = document.getElementById(tmpTabId); if (currTabId == tmpTabId) { tmpTab.style.display = "block"; tmpLink.className = "linkSelected"; } else { tmpTab.style.display = "none"; tmpLink.className = "linkUnselected"; } }// end for }; // end onclick } // end for } initTabs("tabList", "tab_2"); </script>
4. 效果如下:
相关推荐
本书详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然地得出结论,使...
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4 如何编辑CSS 1.1.5 浏览器与CSS 1.2 使用CSS控制页面 1.2.1 ...
《CSS设计彻底研究》详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然...
HTML5模拟动态的Android手机拨号界面,在这个界面中包括了屏幕顶部的TAB切换,像手机一样可在联系人、拨号界面之间滑动切换,当然这个其实就是一个TAB了,另外还实现了拨号效果,...可了解下html5前端相关基础知识。
对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步...
1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问服务器...
闲来无事,研究了一下JavaScript插件的写法,今天就将自己写的一个小插件记录...1、html、css的基础知识; 2、对this,prototype,new等关键词的理解。 简而言之,就是通过参数配置的形式来完成不同效果的展示。 下
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用...
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
实例:1,使用DIV+CSS设计按钮及Tab; 2,使用DIV+CSS设计导航菜单; 3,使用DIV+CSS设计论坛网页; 4,使用DIV+CSS设计博客网页。 第四讲,PHP开发环境 4.1 集成开发环境XAMPP安装; 4.2 Zend St
最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料;本资料仅用于学习。 【课程内容】 第1周 开课介绍 python发展介绍 第一个python程序 变量 字符编码与二进制 字符编码的区别与介绍 用户交互程序 if ...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
使用此扩展程序学习内分泌基础知识,在每个新选项卡中以新的方式学习闪存卡,这些闪存卡完全使用西班牙语,因此,如果您来自拉丁美洲,则对您的学习很有帮助。 此闪存卡的信息来自Guyton 13版的生理学,该项目旨在...
7.1 链接的基础知识 7.2 了解文档位置和路径 7.2.1 绝对路径 7.2.2 文档相对路径 7.2.3 区分uri、url和urn 7.2.4 区分本地链接和服务器链接 7.3 使用a元素定义链接 7.3.1 定义链接的目标uri(href属性) 7.3.2 定义...
--基础:HTML+JS+CSS --进阶:React、Vue -工具安装 --工具由微信官方提供 ---下载地址:https://github.com/zce/weapp-demo -项目预览>校验环境 --根据目录进行操作 --在开发者工具预览效果 --页面基本结构,几乎每...
使用此扩展程序学习内分泌基础知识,在每个新选项卡中以新的方式学习闪存卡,这些闪存卡完全使用西班牙语,因此,如果您来自拉丁美洲,则对您的学习很有帮助。 此闪存卡的信息来自Guyton 13版的生理学,该项目旨在...
事务隔离性的一些基础知识 在组件之间实现事务和异步提交事务(NET2.0) 其它 在.NET访问MySql数据库时的几点经验! 自动代码生成器 关于能自定义格式的、支持多语言的、支持多数据库的代码生成器的想法 发布Oracle...
本书是第I卷,以开发人员在项目开发中经常遇到的问题和必须掌握的技术为中心,介绍了应用PHP进行Web开发的各个方面的知识和技巧,主要包括开发环境、PHP基础、Web页面交互、文件操作、会话应用、图形图像处理及面向...