Im vorherigen Artikel „Vier Möglichkeiten zur Implementierung des Tab-Wechsels in JavaScript“ ging es um vier verschiedene Implementierungsprinzipien des Tab-Wechsels. Jetzt ist es an der Zeit, die Theorie mit der Praxis zu verbinden.
1. Imitieren Sie den Tab-Wechsel der offiziellen Website der „Renmin University of China“. Die Darstellung ist wie folgt
Der Effekt, wenn die Maus über die Nachrichten bewegt wird
Der Effekt, wenn die Maus über die Ankündigung bewegt wird
Der Effekt, wenn die Maus zur Kommunikation bewegt wird
Der akademische, kommunikative und literarische Inhalt ist leer und ich habe nichts geschrieben. Der vollständige Code lautet wie folgt:
Dieses Beispiel ist ein sehr einfacher und häufiger Tab-Schalter. Das Extra in js besteht darin, die Position des Hintergrundbilds zu ändern, und der Rest ist ein einfacher Stil.
<!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>
Nach dem Login kopieren
2. Verwenden Sie input:checked, um den Tab-Wechseleffekt zu erzielen, und fügen Sie nun CSS3 hinzu, um ein schönes Beispiel zu erstellen. Die Darstellung ist wie folgt:
Der Effekt, wenn die Maus auf HTML/CSS klickt
Die Wirkung von AJAX beim Klicken mit der Maus
Der vollständige Code lautet wie folgt: 
<!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>
Nach dem Login kopieren
