快捷導(dǎo)航

JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁(yè)功能【兼容IE6】

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

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

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

標(biāo)簽頁(yè)是一個(gè)很常見(jiàn)的東西，在一些框架中也就很常見(jiàn)的，

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

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

一、基本目標(biāo)

創(chuàng)建一個(gè)如下的標(biāo)簽頁(yè)，在IE8中與谷歌瀏覽器中的效果如下，幾乎沒(méi)有區(qū)別

谷歌瀏覽器：

IE8：

二、制作過(guò)程

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

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

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

<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>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: