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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
axios学习教程全攻略
Mar 26 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
详解JavaScript修改注册表的方法
Jan 05 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
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
python实现查询IP地址所在地
2015/03/29 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python GUI实例学习
2017/11/21 Python
Python实现的字典值比较功能示例
2018/01/08 Python
pandas数值计算与排序方法
2018/04/12 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python的UTC时间转换讲解
2019/02/26 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python中remove函数的踩坑记录
2021/01/04 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
新学期校长寄语
2014/01/18 职场文书
百年校庆节目主持词
2014/03/27 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
校园运动会广播稿
2015/08/19 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript