<li id="ciuyk"></li><button id="ciuyk"></button><code id="ciuyk"><tr id="ciuyk"></tr></code>

點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

javascript實現tab切換的四種方法

來源：懂視網責編：小采時間：2020-11-27 20:25:26

javascript實現tab切換的四種方法

javascript實現tab切換的四種方法:這篇文章主要介紹了javascript實現tab切換的四種方法，并且對每個方法進行了評價，感興趣的小伙伴們可以參考一下tab切換在網頁中很常見，故最近總結了4種實現方法。首先，寫出tab的框架，加上最簡單的樣式，代碼如下：<!DOCTYPE html> &

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript實現tab切換的四種方法:這篇文章主要介紹了javascript實現tab切換的四種方法，并且對每個方法進行了評價，感興趣的小伙伴們可以參考一下tab切換在網頁中很常見，故最近總結了4種實現方法。首先，寫出tab的框架，加上最簡單的樣式，代碼如下：<!DOCTYPE html> &

這篇文章主要介紹了javascript實現tab切換的四種方法，并且對每個方法進行了評價，感興趣的小伙伴們可以參考一下

tab切換在網頁中很常見，故最近總結了4種實現方法。
首先，寫出tab的框架，加上最簡單的樣式，代碼如下：

<!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>
 <p id="tanContainer">
 <p id="tab">
 <ul>
 <li>標題一</li>
 <li>標題二</li>
 <li>標題三</li>
 <li>標題四</li>
 </ul>
 </p>
 <p id="tabCon">
 <p>內容一</p>
 <p>內容二</p>
 <p>內容三</p>
 <p>內容四</p>
 </p>
 </p>
 </body>
 </html>

現在的顯示效果如下圖：

javascript實現tab切換的四種方法

四個tab標題和四個內容區都顯示在了頁面中，現在要實現tab切換效果，即點擊標題一，內容一顯示出來，其他內容不顯示；點擊標題二，內容二顯示出來，其他內容不顯示……
那么，整體思路很簡單，給四個標題綁定事件，觸發的時候對應的內容顯示，其他的內容隱藏。

方法一：點擊標題對應的內容顯示，非點擊標題對應的內容隱藏。代碼如下：

 <!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>
 <p id="tanContainer">
 <p id="tabNav">
 <ul>
 <li onclick="tab('tab1')">標題一</li>
 <li onclick="tab('tab2')">標題二</li>
 <li onclick="tab('tab3')">標題三</li>
 <li onclick="tab('tab4')">標題四</li>
 </ul>
 </p>
 <p id="tab">
 <p id="tab1">內容一</p>
 <p id="tab2">內容二</p>
 <p id="tab3">內容三</p>
 <p id="tab4">內容四</p>
 </p>
 </p>
 </body>
 </html>

方法二：先設置所有內容隱藏，然后點擊標題對用的內容顯示。代碼如下：

方法三：顯示和隱藏通過是有擁有class控制，先把所有的內容隱藏dispaly設為none，而該class的display設置為block，遍歷所有標題節點和內容節點，點擊標題后，該標題節點和對用的內容節點擁有class，其他的沒有。代碼如下：

 <!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 p {
 display:none;
 }
 #tabCon p.fp {
 display:block;
 }
 </style>
 </head>
 <body>
 <p id="tanContainer">
 <p id="tab">
 <ul>
 <li class="fli">標題一</li>
 <li>標題二</li>
 <li>標題三</li>
 <li>標題四</li>
 </ul>
 </p>
 <p id="tabCon">
 <p class="fp">內容一</p>
 <p>內容二</p>
 <p>內容三</p>
 <p>內容四</p>
 </p>
 </p>
 </body>
 <script>
 var tabs=document.getElementById("tab").getElementsByTagName("li");
 var ps=document.getElementById("tabCon").getElementsByTagName("p");

 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";
 ps[i].className="fp";
 }else{
 tabs[i].className="";
 ps[i].className="";
 }
 }
 } 
 </script>
 </html>

該方法的缺點是，內容塊的p下面不能再有p標簽了。

方法四：不用js，用“input:checked”來做tab切換，先把所有的內容隱藏，被選中的內容顯示。代碼如下：

 <!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>
 <p 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>
 
 <p class="panels">
 <p class="panel">
 <p>內容一</p>
 </p>
 <p class="panel">
 <p>內容二</p>
 </p>
 </p>
 </p>
 </body>
 </html>

該方法的缺點是，不同區域切換只能通過點擊。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript實現tab切換的四種方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：切換 js 方式

熱門焦點

javascript實現tab切換的四種方法

javascript實現tab切換的四種方法

javascript實現tab切換的四種方法

最新推薦

猜你喜歡

熱門推薦