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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
vue component组件使用方法详解
Jul 14 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php中iconv函数使用方法
2008/05/24 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
js 居中漂浮广告
2010/03/21 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
留学生求职信
2014/06/03 职场文书
新闻传播专业求职信
2014/07/22 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python
css3 文字断裂效果
2022/04/22 HTML / CSS