上一篇《论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中多了一点的就是改变了背景图片的位置,其他的就是简单的样式。

二、上一篇讲了不用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>

几个不同的tab切换示例的更多相关文章

  1. iOS开发之多表视图滑动切换示例(仿"头条"客户端)---优化篇

    前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展 ...

  2. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  3. WPF案例(-)模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

  4. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  5. bootstrap 标签页tab切换js(含报错原因)

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  6. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  7. CSS3属性之 target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...

  8. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. AOJ -0033 Ball(DFS)

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=22516 一道需要思考的搜索题. 题意:十个球按给定顺序从图中所示容器中下落, ...

  2. SQL SERVER 自增字段相关问题

    SET IDENTITY_INSERT Data0048_TEST ON --给自增列赋值 DBCC CHECKIDENT(TableName) --查看某个表中的自增列当前的值 DBCC CHECK ...

  3. Git回退---reset和revert

    今天学习了git回退的两个命令,现在总结一下: 1.git reset 如果想回退错误的提交C和D,只要把指针移到B上 git reset --hard a0fvf8 而这时候,远程仓库的指针还在D上 ...

  4. Eclipse-Java代码规范和质量检查插件-SonarLint

    SonarQube(Sonar)之前的提供的本地工具是需要依赖SonarQube服务器的,这样导致其运行速度缓慢. 新出的SonarLint的扫描引擎直接安装在本地,速度超快,实时探测代码技术债务,给 ...

  5. Sql查询一个列对应多个列

    Sql查询一个列对应多个列 今天遇到一个问题,表table1有两个字段col1.col2两个字段.先记录下来,以后有个参考. 现在需要查询出的数据满足如下要求: 1.col1重复.col2重复的数据只 ...

  6. jenkinsapi出现HTTPConnectionPool Max retires exceeded异常

    python项目通过使用jenkinsapi远程控制jenkins jenkinsapi使用的远程连接方法是requests包,requests包又使用了urllib3,urllib3又引用了http ...

  7. 002 static and default route

    r2(config)#ip route 192.168.1.0 255.255.255.0 192.168.2.1 r1(config)#ip route 192.168.3.0 255.255.25 ...

  8. 【前端】JavaScript继承实现的四种方式

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4770235.html 一.继承的实现方法 1.原型链继承 这个继承最为简单,它的实现原理是,每一个AO对象都有一 ...

  9. 工作总结 for 另类写法 循环加时间 集合合并 也是用的 static class Enumerable (IEnumerable<T>的扩展方法) (IEnumerable<T> 的 工具类) (所有集合 数组都实现IEnumerable<T>)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. MFC中按下Buttonbutton,弹出一个窗体的同一时候关闭本窗体

     CMyDlg *dlg = new CMyDlg();                //新建一个CMyDlg对象 this->ShowWindow(SW_HIDE);           ...