JavaScript實現(xiàn)的原生態(tài)Tab標簽頁功能【兼容IE6】

更新時間：2017年09月18日 11:28:56 作者：yongh701

這篇文章主要介紹了JavaScript實現(xiàn)的原生態(tài)Tab標簽頁功能,可兼容IE6及谷歌等瀏覽器,涉及javascript事件響應及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)的原生態(tài)Tab標簽頁功能。分享給大家供大家參考，具體如下：

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

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

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

一、基本目標

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

谷歌瀏覽器：

IE8：

二、制作過程

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 style="border:1px solid #000000;float:left;wight:10%;">
<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" style="display:block;">aaaaaaaaaaaaaaaaaaa</div>
<div id="tabdiv2" style="display:none;">bbbbbbbbbbbbbbbbb</div>
<div id="tabdiv3" style="display:none;">cccccccccccccccc</div>
<div id="tabdiv4" style="display:none;">dddddddddddddd</div>
</div>
<div style="clear:both"></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>

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: