javascript实现tab切换的两个实例

2024-12-01 16:57:20

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

一、仿”中国人民大学“官网的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时的效果

鼠标点击AJAX时的效果

完整代码如下：

 <!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实现tab切换的四种方法

tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style:
Android App中制作仿MIUI的Tab切换效果的实例分享

1.概述哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过TabPageIndicator,并且很多知名APP都使用过这个开源的指示器.大家有没有想过如何自己去实现这样的一个指示器,并且代码会有多复杂呢~~~今天,我就带领大家来从无到有的实现这样一个指示器,当然了,不准备一模一样,搞得没有创新似的,再看标题,跟MIUI相关,所以我们准备做一个特性与TabPageIndicator一致的,但是样子和MIUI的Tab一样的~
最简单的tab切换实例代码

JS: $(".con").eq(0).show(); $(".btn span").click(function(){ var num =$(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) CSS: body { cursor:default; -webkit-text-s
几种tab切换详解

1.鼠标移入移出切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/css"> * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { marg
微信小程序 swiper制作tab切换实现附源码

微信小程序 swiper制作tab切换实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view
jQuery+css实现的tab切换标签(兼容各浏览器)

本文实例讲述了jQuery+css实现的tab切换标签.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
jquery实现初次打开有动画效果的网页TAB切换代码

本文实例讲述了jquery实现初次打开有动画效果的网页TAB切换代码.分享给大家供大家参考.具体如下: 这是一款初次打开有动画效果的网页TAB代码,只在第一次点击TAB菜单的时候,会显示动画,再次点击的时候就没有了,一个实用的网页选项卡效果,有需要的请下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PU
jQuery实现带延迟的二级tab切换下拉列表效果

本文实例讲述了jQuery实现带延迟的二级tab切换下拉列表效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现带延时效果的下拉列表菜单,有动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q
jquery实现简单Tab切换菜单效果

本文实例为大家分享了jquery Tab切换菜单的实现代码,供大家参考,具体内容如下实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">导航菜单</a></li> <li><a href="
js中常用的Tab切换效果(推荐)

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto

javascript实现tab切换的两个实例

相关推荐

随机推荐