您的位置：首页 > 其它

几个不同的tab切换示例

2015-10-27 17:38 232 查看

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

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

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航