javascript实现tab切换的两个实例


Posted in Javascript onNovember 05, 2015

上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例。

一、仿”中国人民大学“官网的tab切换,背景是图片,效果图如下:

鼠标移到新闻时的效果

javascript实现tab切换的两个实例 

鼠标移到公告时的效果

javascript实现tab切换的两个实例 

鼠标移到交流时的效果

javascript实现tab切换的两个实例 

学术、交流和文体的内容为空,我没有写。完整代码如下:

<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
 padding: 0;
 margin: 0;
 }
 body{
 font-family: Arial,Verdana,sans-serif,"宋体";
 }
 li{
 list-style: none;
 float:left;
 }
 a{
 text-decoration: none;
 color: #ffeec6;
 }
 #tanContainer{
 height: 210px;
 width: 470px;
 background: url(homeinfo-trans-bg.png);
 overflow: hidden;
 color: #ffeec6;
 }
 #tanContainer li a{
 height: 25px;
 display: inline-block;
 margin-left: 18px;
 font-size: 12px;
 padding-top: 12px;
 margin-bottom: 15px;
 }
 ul li a.fli {
 }
 #tabOne{
 width: 122px;
 opacity: 0;
 }
 #tabTwo{
 padding-left: 102px;
 }
 #tabCon {
 clear: both;
 }
 #tabCon p a{
 color: #FFF2D5;
 }
 div div p{
 font-size: 12px;
 margin: 10px 0 0 20px;
 width: 440px;
 }
 #bigPara{
 font-size: 16px;
 color: #FFF2D5;
 border-bottom: 1px dotted #FFF2D5;
 padding-bottom: 5px;
 }
 #tabCon div {
 display:none;
 }
 #tabCon div.fdiv {
 display:block;
 }
 </style>
 </head>
 <body>
 <div id="tanContainer">
 <div id="tab">
 <ul>
 <li><a class="fli" href="#" id="tabOne">新闻</a></li>
 <li><a href="#" id="tabTwo">公告</a></li>
 <li><a href="#">学术</a></li>
 <li><a href="#">交流</a></li>
 <li><a href="#">文体</a></li>
 </ul>
 </div>
 <div id="tabCon">
 <div class="fdiv">
 <p id="bigPara"><a href="#">塞浦路斯总统尼科斯·阿纳斯塔西亚迪斯到访人民大学 获...</a></p>
 <p><a href="#" title="中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)">中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)</a></p>
 <p><a href="#">中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)</a></p>
 <p><a href="#">中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)</a></p>
 <p><a href="#">中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉</a></p>
 
 </div>
 <div>
 <p><a>2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)</a></p>
 <p><a>关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)</a></p>
 <p><a>我校第十六门中国大学视频公开课上线,请大家积极关注...(2015-10-26)</a></p>
 <p><a>关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)</a></p>
 <p><a>关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)</a></p>
 <p><a>中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)</a></p>
 </div>
 <div>内容三</div>
 <div>内容四</div>
 <div>内容五</div>
 </div>
 </div>
 </body>
 <script>
 var tabs=document.getElementById("tab").getElementsByTagName("li");
 var divs=document.getElementById("tabCon").getElementsByTagName("div");
 
 for(var i=0;i<tabs.length;i++){
 tabs[i].onmouseover=function(){change(this);}
 }
 
 function change(obj){
 for(var i=0;i<tabs.length;i++){
 if(tabs[i]==obj){
 tabs[i].className="fli";
 divs[i].className="fdiv";
 if(i==0){
 document.getElementById("tanContainer").style.backgroundPosition="0 0"
 }else{
 document.getElementById("tanContainer").style.backgroundPosition="0 -210px"
 }
 }else{
 tabs[i].className="";
 divs[i].className="";
 }
 } } 
 </script>
 </html>

此实例是很简单也很常见的tab切换,js中多了一点的就是改变了背景图片的位置,其他的就是简单的样式。

二、用input:checked来实现tab切换效果,现在就用此原理加上css3做一个漂亮的实例,在切换的时候,内容区是渐现的。效果图如下:

鼠标点击HTML/CSS时的效果

javascript实现tab切换的两个实例

鼠标点击AJAX时的效果

javascript实现tab切换的两个实例

完整代码如下: 

<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>input:checked实现tab切换</title>
 <style>
 .tabs{
 color: #FFF;
 font-family: "微软雅黑";
 }
 input{
 opacity: 0;/*隐藏input的选择框*/
 }
 input:checked+label{
 padding-bottom: 6px;
 font-weight: bold;
 }
 label{
 cursor: pointer;/*鼠标移上去变成手状*/
 float: left;
 
 width: 120px;
 line-height: 40px;
 margin-right: 5px;
 text-align: center;
 }
 .tabs label:nth-of-type(1){
 background: #5eb0de;
 }
 .tabs label:nth-of-type(2){
 background: #86cad7;
 }
 .tabs label:nth-of-type(3){
 background: #e9bab3;
 }
 .tabs label:nth-of-type(4){
 background: #a8c194;
 }
 label:hover{
 font-weight: bold;
 }
 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){
 opacity: 1;
 background: #5eb0de;
 -webkit-transition: .3s;
 }
 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
 opacity: 1;
 background: #86cad7;
 -webkit-transition: .3s;
 }
 .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){
 opacity: 1;
 background: #e9bab3;
 -webkit-transition: .3s;
 }
 .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){
 opacity: 1;
 background: #a8c194;
 -webkit-transition: .3s;
 }
 .panel{
 opacity: 0;
 position: absolute;/*使内容区域位置一样*/
 
 height: 200px;
 width: 455px;
 margin-top: 25px;
 padding: 0 20px;
 }
 </style>
 </head>
 <body>
 <div class="tabs">
 <input checked id="one" name="tabs" type="radio">
 <label for="one">HTML/CSS</label>
 
 <input id="two" name="tabs" type="radio">
 <label for="two">JavaScript</label>
 
 <input id="three" name="tabs" type="radio">
 <label for="three">AJAX</label>
 
 <input id="four" name="tabs" type="radio">
 <label for="four">Sever Side</label>
 
 <div class="panels">
 <div class="panel">
 <h2>HTML文本标签语言</h2>
 <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习!你会喜欢它的!</p>
 </div>
 
 <div class="panel">
 <h2>JavaScript脚本语言</h2>
 <p>JavaScript 是世界上最流行的脚本语言。<br/>
 JavaScript 是属于 web 的语言,它适用于PC、笔记本电脑、平板电脑和移动电话。<br/>
 JavaScript 被设计为向 HTML 页面增加交互性。
 </p>
 </div>

 <div class="panel">
 <h2>AJAX阿贾克斯</h2>
 <p>AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。<br/>
 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。<br/>
 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
 </p>
 </div>
 
 <div class="panel">
 <h2>Sever Side服务器脚本</h2>
 <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/>
 ASP 是创建动态交互性网页的强大工具。<br/>
 ADO 指 ActiveX 数据对象(ActiveX Data Objects)。<br/>
 PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/>
 VBScript 是微软公司出品的脚本语言。
 </p>
 </div>
 
 </div>
 </div>
 </body>
 </html>
Javascript 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
js简单实现交换Li的值
May 22 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 #Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 #Javascript
使用JQuery实现的分页插件分享
Nov 05 #Javascript
javascript实现tab切换的四种方法
Nov 05 #Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 #Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 #Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 #Javascript
You might like
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
通过cmd进入python的实例操作
2019/06/26 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
keras多显卡训练方式
2020/06/10 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
个人授权委托书范本
2014/04/03 职场文书
淘宝客服工作职责
2014/07/11 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
四查四看整改措施
2014/09/19 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
详解PyTorch模型保存与加载
2022/04/28 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL