JavaScript原生程式碼編寫選項卡Tab頁跳轉功能
阿新 • • 發佈：2019-02-17
本文主要介紹使用 JavaScript 原生程式碼編寫選項卡Tab頁的跳轉功能。
一、先來看看效果圖
二、準備文字素材
文字素材選擇詩經裡面的三首古詩，分別是關雎、蒹葭和采薇
《關雎》
關關雎鳩， 在河之洲。 窈窕淑女， 君子好逑。
參差荇菜， 左右流之。 窈窕淑女， 寤寐求之。
求之不得， 寤寐思服。 悠哉悠哉， 輾轉反側。
參差荇菜， 左右采之。 窈窕淑女， 琴瑟友之。
參差荇菜， 左右芼之。 窈窕淑女， 鐘鼓樂之。
《蒹葭》
蒹葭蒼蒼， 白露為霜。 所謂伊人， 在水一方。
溯洄從之， 道阻且長。 溯游從之， 宛在水中央。
蒹葭萋萋， 白露未晞。 所謂伊人， 在水之湄。
溯洄從之， 道阻且躋。 溯游從之， 宛在水中坻。
蒹葭采采， 白露未已。 所謂伊人， 在水之涘。
溯洄從之， 道阻且右。 溯游從之， 宛在水中沚。
《采薇》
昔我往矣， 楊柳依依。
今我來思， 雨雪霏霏。
行道遲遲， 載渴載飢。
我心傷悲， 莫知我哀！
三、HTML頁面佈局
根據效果圖，我們需要先給這個頁面進行佈局
<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>
四、設定CSS樣式
五、JS程式碼實現選項卡切換<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>