Tab-Wechsel kommt auf Webseiten sehr häufig vor, daher haben wir kürzlich vier Implementierungsmethoden zusammengefasst.
Schreiben Sie zunächst den Tab-Rahmen und fügen Sie den einfachsten Stil hinzu. Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon{
clear: both;
}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</div>
<div id="tabCon">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
<div>内容四</div>
</div>
</div>
</body>
</html>Der aktuelle Anzeigeeffekt ist wie folgt:
Die vier Registerkartentitel und vier Inhaltsbereiche werden alle auf der Seite angezeigt. Jetzt müssen wir den Tab-Umschalteffekt erzielen, dh auf Titel eins klicken, Inhalt eins wird angezeigt und andere Inhalte werden nicht angezeigt. Klicken Sie auf Titel zwei, Inhalt zwei wird angezeigt. Andere Inhalte werden nicht angezeigt...
Die Gesamtidee ist also sehr einfach. Ereignisse an vier Titel binden. Beim Auslösen werden die entsprechenden Inhalte angezeigt und andere Inhalte ausgeblendet.
Methode 1: Der Inhalt, der dem angeklickten Titel entspricht, wird angezeigt und der Inhalt, der dem nicht angeklickten Titel entspricht, wird ausgeblendet. Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
</style>
<script>
function tab(pid){
var tabs=["tab1","tab2","tab3","tab4"];
for(var i=0;i<4;i++){
if(tabs[i]==pid){
document.getElementById(tabs[i]).style.display="block";
}else{
document.getElementById(tabs[i]).style.display="none";
}
}
}
</script>
</head>
<body>
<div id="tanContainer">
<div id="tabNav">
<ul>
<li onclick="tab('tab1')">标题一</li>
<li onclick="tab('tab2')">标题二</li>
<li onclick="tab('tab3')">标题三</li>
<li onclick="tab('tab4')">标题四</li>
</ul>
</div>
<div id="tab">
<div id="tab1">内容一</div>
<div id="tab2">内容二</div>
<div id="tab3">内容三</div>
<div id="tab4">内容四</div>
</div>
</div>
</body>
</html>Methode 2: Stellen Sie zunächst alle Inhalte so ein, dass sie ausgeblendet werden, und klicken Sie dann auf den Titel, um die relevanten Inhalte anzuzeigen. Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon{
clear: both;
}
#tabCon_1{
display: none;
}
#tabCon_2{
display: none;
}
#tabCon_3{
display: none;
}
</style>
<script>
function changeTab(tabCon_num){
for(i=0;i<=3;i++) {
document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏
}
document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层
}
</script>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li onclick="changeTab('0')">标题一</li>
<li onclick="changeTab('1')">标题二</li>
<li onclick="changeTab('2')">标题三</li>
<li onclick="changeTab('3')">标题四</li>
</ul>
</div>
<div id="tabCon">
<div id="tabCon_0">内容一</div>
<div id="tabCon_1">内容二</div>
<div id="tabCon_2">内容三</div>
<div id="tabCon_3">内容四</div>
</div>
</div>
</body>
</html>Methode 3: Anzeigen und Ausblenden werden durch den Besitz der Klasse gesteuert. Blenden Sie zunächst den gesamten Inhalt aus und stellen Sie die Anzeige auf „Keine“ ein, und stellen Sie die Anzeige der Klasse auf „Alle Titelknoten und Inhaltsknoten durchqueren“ ein . Nach dem Klicken auf den Titel verfügen der Titelknoten und der entsprechende Inhaltsknoten über Klassen, die anderen jedoch nicht. Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon {
clear: both;
}
#tabCon div {
display:none;
}
#tabCon div.fdiv {
display:block;
}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li class="fli">标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</div>
<div id="tabCon">
<div class="fdiv">内容一</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].onclick=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";
}else{
tabs[i].className="";
divs[i].className="";
}
}
}
</script>
</html>Der Nachteil dieser Methode besteht darin, dass sich unter dem Div des Inhaltsblocks kein Div-Tag mehr befinden kann.
Methode 4: Verwenden Sie anstelle von js „input:checked“, um die Registerkarten zu wechseln. Blenden Sie zunächst alle Inhalte aus und zeigen Sie die ausgewählten Inhalte an. Der 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>
input{
opacity: 0;/*隐藏input的选择框*/
}
label{
cursor: pointer;/*鼠标移上去变成手状*/
float: left;
}
label:hover{
background: #eee;
}
input:checked+label{
color: red;
}
/*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
.tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),
.tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
opacity: 1;
}
.panel{
opacity: 0;
position: absolute;/*使内容区域位置一样*/
}
</style>
</head>
<body>
<div class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">标题一</label>
<input id="two" name="tabs" type="radio">
<label for="two">标题二</label>
<div class="panels">
<div class="panel">
<p>内容一</p>
</div>
<div class="panel">
<p>内容二</p>
</div>
</div>
</div>
</body>
</html>Der Nachteil dieser Methode besteht darin, dass der Wechsel zwischen verschiedenen Bereichen nur per Klick erfolgen kann.
Das Obige ist eine Zusammenfassung der Tab-Wechsel-Implementierungsmethode für alle. Ich hoffe, dass sie zum Lernen aller beiträgt. Folgen Sie dieser Idee und beginnen Sie mit der Erstellung Ihrer eigenen Tab-Wechseleffekte.
