Cet article présente principalement l'utilisation du code natif JavaScript pour écrire la fonction de saut de la page à onglet.
1. Jetons d’abord un coup d’œil aux rendus.
2. Préparer des textes
Le texte est sélectionné parmi trois poèmes anciens du Livre des Chants, à savoir Guan Ju, Jian Jia et Cai Wei.
" Guan Ju "
Guan Guan Jujiu, sur l'île fluviale. Ma belle dame, je suis un gentleman.
Les plantes aquatiques sont mélangées et mélangées, coulant à gauche et à droite. Une dame gracieuse, je la désire.
caca. Tranquillement, se retournant et se retournant.
Il existe différentes sortes de cresson, ramassez-les de gauche à droite. Dame gracieuse, elle joue du piano et de la harpe en amie.
Il existe différentes sortes de cresson, et les branches gauche et droite sont plantées. La belle dame est jouée par des cloches et des tambours.
" Jian Jia "
Le jianjia est vert et la rosée blanche est du givre. La soi-disant beauté est du côté de l’eau.
Si vous le suivez, la route sera longue et bloquée. Avec le recul, Wan est au milieu de l'eau.
Le jianjia est luxuriant et la rosée blanche brille toujours. La soi-disant beauté est sur l'eau.
Suivez-le, mais la route est bloquée et vous pouvez avancer. Si vous retracez le voyage en arrière, vous aurez l'impression de nager dans l'eau.
Le jianjia est collecté et la rosée blanche ne s'est pas arrêtée. La soi-disant beauté est dans la rivière.
Revenir en arrière de la route, résistance et à droite. Si vous retracer le voyage en arrière, vous nagerez dans l'eau.
" Plumer Wei "
J'ai quitté le passé et les saules sont toujours là.
Maintenant j’y pense, il pleut et il neige.
Le voyage est lent, plein de soif et de faim.
Mon cœur est triste, je ne sais pas à quel point je suis triste !
3. Mise en page HTML
Selon les rendus, nous devons d'abord mettre en page cette page
<body>
<div id="tabs">
<ul>
<li class="on">关雎</li>
<li>蒹葭</li>
<li>采薇</li>
</ul>
<div>
关关雎鸠， 在河之洲。 窈窕淑女， 君子好逑。<br>
参差荇菜， 左右流之。 窈窕淑女， 寤寐求之。<br>
求之不得， 寤寐思服。 悠哉悠哉， 辗转反侧。<br>
参差荇菜， 左右采之。 窈窕淑女， 琴瑟友之。<br>
参差荇菜， 左右芼之。 窈窕淑女， 钟鼓乐之。<br>
</div>
<div class="hide">
蒹葭苍苍， 白露为霜。 所谓伊人， 在水一方。 <br>
溯洄从之， 道阻且长。 溯游从之， 宛在水中央。<br>
蒹葭萋萋， 白露未晞。 所谓伊人， 在水之湄。 <br>
溯洄从之， 道阻且跻。 溯游从之， 宛在水中坻。<br>
蒹葭采采， 白露未已。 所谓伊人， 在水之涘。<br>
溯洄从之， 道阻且右。 溯游从之， 宛在水中沚。<br>
</div>
<div class="hide">
昔我往矣， 杨柳依依。<br>
今我来思， 雨雪霏霏。<br>
行道迟迟， 载渴载饥。<br>
我心伤悲， 莫知我哀！<br>
</div>
</div>
</body>4. Définir les styles CSS
<style type="text/css">
*{padding:0;margin:0}
#tabs {width:450px;padding:5px;margin:20px;}
#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px #fd9c15 solid;}
#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0 3px;border:1px solid #fd9c15;border-bottom:none;display:inline-block;width:60px;text-align: center;}
#tabs ul li.on{border:2px solid #fd9c15;border-bottom: 2px solid #fff; font-size: 20px}
#tabs div{height:200px;line-height: 25px;border:2px solid #fd9c15;border-top:none;padding:5px;}
.hide{display: none;}
</style> <script type="text/javascript">
window.onload = function(){
var oTabs = document.getElementById("tabs");
var oUl = oTabs.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTabs.getElementsByTagName("div");
for(var i= 0,len = oLis.length;i<len;i++){
oLis[i].index = i;
oLis[i].onclick = function() {
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
}
}
</script><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript原生代码 - 选项卡跳转</title>
<style type="text/css">
*{padding:0;margin:0}
#tabs {width:450px;padding:5px;margin:20px;}
#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px #fd9c15 solid;}
#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0 3px;border:1px solid #fd9c15;border-bottom:none;display:inline-block;width:60px;text-align: center;}
#tabs ul li.on{border:2px solid #fd9c15;border-bottom: 2px solid #fff; font-size: 20px}
#tabs div{height:200px;line-height: 25px;border:2px solid #fd9c15;border-top:none;padding:5px;}
.hide{display: none;}
</style>
<script type="text/javascript">
window.onload = function(){
var oTabs = document.getElementById("tabs");
var oUl = oTabs.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTabs.getElementsByTagName("div");
for(var i= 0,len = oLis.length;i<len;i++){
oLis[i].index = i;
oLis[i].onclick = function() {
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
}
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li class="on">关雎</li>
<li>蒹葭</li>
<li>采薇</li>
</ul>
<div>
关关雎鸠， 在河之洲。 窈窕淑女， 君子好逑。<br>
参差荇菜， 左右流之。 窈窕淑女， 寤寐求之。<br>
求之不得， 寤寐思服。 悠哉悠哉， 辗转反侧。<br>
参差荇菜， 左右采之。 窈窕淑女， 琴瑟友之。<br>
参差荇菜， 左右芼之。 窈窕淑女， 钟鼓乐之。<br>
</div>
<div class="hide">
蒹葭苍苍， 白露为霜。 所谓伊人， 在水一方。 <br>
溯洄从之， 道阻且长。 溯游从之， 宛在水中央。<br>
蒹葭萋萋， 白露未晞。 所谓伊人， 在水之湄。 <br>
溯洄从之， 道阻且跻。 溯游从之， 宛在水中坻。<br>
蒹葭采采， 白露未已。 所谓伊人， 在水之涘。<br>
溯洄从之， 道阻且右。 溯游从之， 宛在水中沚。<br>
</div>
<div class="hide">
昔我往矣， 杨柳依依。<br>
今我来思， 雨雪霏霏。<br>
行道迟迟， 载渴载饥。<br>
我心伤悲， 莫知我哀！<br>
</div>
</div>
</body>
</html>