Heim > Artikel > Web-Frontend > JavaScript implementiert Tabs in Webseiten (zwei Methoden)
JavaScript implementiert Tabs in Webseiten (zwei Methoden)
- 陈政宽～Original
- 2017-06-28 11:59:211670Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von js-Anweisungen zum Implementieren von Registerkarten in Webseiten vorgestellt. Es ist sehr gut und hat Referenzwert.
Es wird häufig verwendet Webseiten So etwas wie ein Tab, um es ganz klar auszudrücken: Wenn man auf eine Option klickt, wird der Inhalt dieser Option unten angezeigt.
Methode 1:
Methode 1 kann mit einfachem Code implementiert werden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 600px;background: #ccc;margin: 0 auto;}
li{list-style: none;}
#ul1{display: block; width: 100%;overflow: hidden;}
#ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
#content{width: 100%;margin-top: 20px;}
#content p{display: none;}
#content p.active{display: block;}
.show{background: red;}
</style>
</head>
<body>
<p id="box">
<ul id="ul1">
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<p id="content">
<p class="active">
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</p>
<p>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</p>
<p>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</p>
<p>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</p>
<p>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</p>
</p>
</p>
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
var op=document.getElementById("content").getElementsByTagName("p");
//alert(op.length)
for(var i=0;i<oli.length;i++){
oli[i]._index=i;
oli[i].onclick=function(){
//alert(i);
for(i=0;i<oli.length;i++){
oli[i].className='';
op[i].style.display='none';
}
this.className='show';
op[this._index].style.display='block';
}
}
}
</script>
</body>
</html>Zuerst definieren wir den Inhalt im Webseiten-Tab im HTML-Teil.
<p id="box">
<ul id="ul1"><!--选项卡中的点击部分-->
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<p id="content">
<p class="active"><!--选项卡中要显示和被显示的部分-->
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</p>
<p>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</p>
<p>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</p>
<p>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</p>
<p>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</p>
</p>
</p>Der CSS-Teil ändert den Inhalt in HTML:
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 600px;background: #ccc;margin: 0 auto;}
li{list-style: none;}
#ul1{display: block; width: 100%;overflow: hidden;}
#ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
#content{width: 100%;margin-top: 20px;}
#content p{display: none;}
#content p.active{display: block;}
.show{background: red;}
</style>Der letzte ist der wichtigste js-Teil:
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
var op=document.getElementById("content").getElementsByTagName("p");//提取HTML中的元素
//alert(op.length)
for(var i=0;i<oli.length;i++){
oli[i]._index=i;
oli[i].onclick=function(){
//alert(i);
for(i=0;i<oli.length;i++){
oli[i].className='';
op[i].style.display='none';
}
this.className='show';
op[this._index].style.display='block';
}
}
}
</script>Die erste for-Schleife in der JS-Anweisung dient dazu, die angeklickten Teile aller Tabs abzurufen, da auf die I-Variable in der Ereignisfunktion unten nicht zugegriffen werden kann, sodass die i-Variable bei jedem Klicken zu oli .length führt Wert. Daher wird der Wert von i einem benutzerdefinierten Elementattribut übergeben, um den Wert von i in der Schleife zur Verwendung unten zu speichern. Das heißt: oli[i]._index=i;
Nach dem Hinzufügen der Click-Funktion besteht die zweite for-Schleife darin, den Klassennamen aller Oli in „leer“ und den Stil aller Operationen zu ändern. display='none'; fügen Sie nach dem Ende der Schleife den Klassennamen zum aktuell angeklickten Oli und den entsprechenden Op-Stil unten als display='block' hinzu;
Das Folgende ist das Ergebnis der Operation:
Beim Schreiben eines Programms müssen Sie auf den Klickteil im Tab achten: Die Anzahl von li (oli.length in JS) muss mit der Anzahl von p übereinstimmen, die im p mit der unten stehenden Inhalts-ID enthalten sind (op.length in JS). Da oli.length und op.length nicht gleich sind, meldet das Programm einen Fehler, aber der Fehler kann für eine lange Zeit nicht gefunden werden Seien Sie vorsichtiger.
Methode zwei:
Methode eins eignet sich für Fälle, in denen es relativ wenige Registerkarten gibt, aber wir müssen diese verwenden, wenn es eine gibt viel Tab-Inhalt. Die zweite Methode basiert auf einem wichtigen Wissenspunkt in JS, über den unser Lehrer diese Woche gesprochen hat: selbstlaufende Funktion
(function a(){
//函数里的内容
})(参数);define function a(); bis Die gesamte Funktion hat Klammern und die folgenden Klammern sind Eingabeparameter.
Das Folgende ist das Programm für die selbstlaufende Funktion in Methode zwei:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多个tab选项卡</title>
<script>
window.onload = function() {
tab("tabMain", "click");
tab("tabMain1", "click");
tab("tabMain2", "click");
tab("tabMain4", "click");
function tab(id, event) {
var op = document.getElementById(id);
var oBtn = op.getElementsByTagName("li");
var oBox = op.getElementsByTagName("p");
for(var i = 0; i < oBtn.length; i++) {
//console.log(i)
(function(index) {//自执行函数
oBtn[index].addEventListener(event, function() {
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].className = '';
oBox[i].className = 'tabSide';
}
this.className = 'active';
oBox[index].className = 'active';
});//添加事件监听
})(i)
}
}
}
</script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.tabMenu {
width: 300px;
margin: 50px auto 0 auto;
}
.tabMenu ul {
display: block;
overflow: hidden;
width: 300px;
height: 40px;
background: #eee;
}
.tabMenu ul li {
cursor: pointer;
display: block;
float: left;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.tabMenu ul li.active {
background: #f00;
color: #fff;
}
.tabMenu .tabSide {
display: none;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
.tabMenu p.active {
display: block;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
</style>
</head>
<body>
<p id="tabMain" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain1" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain2" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain4" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
</body>
</html>Ähnlich wie Methode eins, Schreiben Sie zuerst den Inhalt in HTML, CSS. Um den HTML-Code teilweise zu ändern, schauen wir uns direkt den JS-Teil an.
<script>
window.onload = function() {
tab("tabMain", "click");
tab("tabMain1", "click");
tab("tabMain2", "click");
tab("tabMain4", "click");
function tab(id, event) {
var op = document.getElementById(id);
var oBtn = op.getElementsByTagName("li");
var oBox = op.getElementsByTagName("p");
for(var i = 0; i < oBtn.length; i++) {
//alert(i)；
(function(index) {//自执行函数
oBtn[index].addEventListener(event, function() {
for(var i = 0; i < oBtn.length; i++) {
oBtn[i].className = '';
oBox[i].className = 'tabSide';
}
this.className = 'active';
oBox[index].className = 'active';
});//添加事件监听
})(i)
}
}
}
</script>Vervollständigen Sie mehrere Registerkarten, indem Sie Ereignisse und selbstlaufende Funktionen hinzufügen.
Das obige ist der detaillierte Inhalt vonJavaScript implementiert Tabs in Webseiten (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!