溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用JavaScript實現(xiàn)原生態(tài)Tab標簽頁功能

發(fā)布時間：2021-04-13 13:51:58 來源：億速云 閱讀：182 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)如何使用JavaScript實現(xiàn)原生態(tài)Tab標簽頁功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體如下：

標簽頁是一個很常見的東西，在一些框架中也就很常見的，

但未必所有人都知道怎么寫，很多人知道怎么在網(wǎng)上復(fù)制一份是真的，

這樣不好，往往需要用大量的時間去修改網(wǎng)上復(fù)制下來的東西，還不如自己寫一份快。

一、基本目標

創(chuàng)建一個如下的標簽頁，在IE8中與谷歌瀏覽器中的效果如下，幾乎沒有區(qū)別

谷歌瀏覽器：

如何使用JavaScript實現(xiàn)原生態(tài)Tab標簽頁功能

IE8：

如何使用JavaScript實現(xiàn)原生態(tài)Tab標簽頁功能

二、制作過程

1、首先布置好場景，在一個圖層內(nèi)：

圖層1~圖層4四個超級鏈接是一個圖層，然后各自的圖層的內(nèi)容分別是各自的圖層，默認是圖層1的內(nèi)容顯示，而圖層2~4則默認不顯示

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<div >
<div>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層1</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層2</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層3</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層4</a>
</div>
<div id="tabdiv1" >aaaaaaaaaaaaaaaaaaa</div>
<div id="tabdiv2" >bbbbbbbbbbbbbbbbb</div>
<div id="tabdiv3" >cccccccccccccccc</div>
<div id="tabdiv4" >dddddddddddddd</div>
</div>
<div ></div>
</body>
</html>

2、然后是每一個超級鏈接都傳遞自身到Javascript腳本處理，注意的是，如果對超級鏈接添加Javascript腳本，必須在寫上href，并且這個鏈接指向javascript:void(0)，隨后，再加上onclick屬性。之后，得到整個超級鏈接的Javascript根據(jù)超級鏈接的文本進行判斷，如果是圖層1，則顯示圖層1，隱藏其它的所有圖層，以此類推。注意的是，a是沒有value屬性的，所以這里根據(jù)其內(nèi)文本進行判斷。

<script>
function div_tab(obj){
  switch(obj.innerHTML){
    case "圖層1":
      document.getElementById("tabdiv1").style.display="block";
      document.getElementById("tabdiv2").style.display="none";
      document.getElementById("tabdiv3").style.display="none";
      document.getElementById("tabdiv4").style.display="none";
      break;
    case "圖層2":
      document.getElementById("tabdiv1").style.display="none";
      document.getElementById("tabdiv2").style.display="block";
      document.getElementById("tabdiv3").style.display="none";
      document.getElementById("tabdiv4").style.display="none";
      break;
    case "圖層3":
      document.getElementById("tabdiv1").style.display="none";
      document.getElementById("tabdiv2").style.display="none";
      document.getElementById("tabdiv3").style.display="block";
      document.getElementById("tabdiv4").style.display="none";
      break;
    case "圖層4":
      document.getElementById("tabdiv1").style.display="none";
      document.getElementById("tabdiv2").style.display="none";
      document.getElementById("tabdiv3").style.display="none";
      document.getElementById("tabdiv4").style.display="block";
      break;
  }
}
</script>

感謝各位的閱讀！關(guān)于“如何使用JavaScript實現(xiàn)原生態(tài)Tab標簽頁功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手