我很早以前的主題中使用過Dezinerfolio開發的一個手風琴滑動門腳本，僅僅幾KB大小，有淡入淡出效果。但是這個腳本有些BUG, 會出現不能截入內容塊的情況。
而現在主題側邊欄使用的是一個1KB的JS TAB腳本，按標準代碼編輯器算，僅21行代碼，也是從網上搜來的，具體來源也無法查證了。最近有不少新手朋友問我如何實現這個效果，特此分享一下。
當然，首先要說的是，這個腳本僅僅實現的就是最簡單的TAB切換，沒有特效，沒有Ajax，沒有任何花俏的行為。因為花俏總是要付出代價的，一個視覺效果驚人的特效可能需要體積龐大的腳本來支持，結果就是，你的特效可能會吸引1個訪客，但導致的載入速度緩慢卻讓你失去了10個訪客。
所以俺個人一直喜歡用簡單實用小巧可愛的腳本。當然，如果你不在乎那些連個幾秒都等不上的訪客，或是你的主機夠好你能夠解決速度問題，那本站曾經介紹過很多強大漂亮的JS TAB特效腳本能為你效勞.
2. 在網頁文件中調用這個腳本
你可以在<head>部分添加下面的代碼，也可以在要使用TAB選項卡的前面添加。
<script type="text/javaScript" src="<?php bloginfo("template_url") ?>/tabber.js "></script>
藍色部份是tabber.js的地址，我這里是以WordPress主題來做解說，你使用的時候可以使用絕對URL地址或按你的網站結構使用相對URL地址。
我很早以前的主題中使用過Dezinerfolio開發的一個手風琴滑動門腳本，僅僅幾KB大小，有淡入淡出效果。但是這個腳本有些BUG, 會出現不能截入內容塊的情況。
而現在主題側邊欄使用的是一個1KB的JS TAB腳本，按標準代碼編輯器算，僅21行代碼，也是從網上搜來的，具體來源也無法查證了。最近有不少新手朋友問我如何實現這個效果，特此分享一下。
當然，首先要說的是，這個腳本僅僅實現的就是最簡單的TAB切換，沒有特效，沒有Ajax，沒有任何花俏的行為。因為花俏總是要付出代價的，一個視覺效果驚人的特效可能需要體積龐大的腳本來支持，結果就是，你的特效可能會吸引1個訪客，但導致的載入速度緩慢卻讓你失去了10個訪客。
所以俺個人一直喜歡用簡單實用小巧可愛的腳本。當然，如果你不在乎那些連個幾秒都等不上的訪客，或是你的主機夠好你能夠解決速度問題，那本站曾經介紹過很多強大漂亮的JS TAB特效腳本能為你效勞.
1. 進入正題，首先來看這個腳本的代碼, 就把它命名為”tabber.js”好了:
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("' + objName + '")');}else if(document.layers){return eval("document.layers['" + objName +"']");}else{return eval('document.all.' + objName);}}function PARMenu(index,flag){for(var i=0;i<4;i++){/* max-4 */if(GetObj("content"+i)&&GetObj("PARm"+i)){GetObj("content"+i).style.display = 'none';GetObj("PARm"+i).className = "out";}}if(GetObj("content"+index)&&GetObj("PARm"+index)){GetObj("content"+index).style.display = 'block';GetObj("PARm"+index).className = "on";}}2. 在網頁文件中調用這個腳本
你可以在<head>部分添加下面的代碼，也可以在要使用TAB選項卡的前面添加。
<script type="text/javaScript" src="<?php bloginfo("template_url") ?>/tabber.js "></script>藍色部份是tabber.js的地址，我這里是以WordPress主題來做解說，你使用的時候可以使用絕對URL地址或按你的網站結構使用相對URL地址。
3. HTML代碼
以下為引用的內容：<div class="tabmenu"> |
1. DIV層tabmenu中的onclick事件是點擊時進行TAB切換，你也可以用其它事件進行替換，比如onMouseOver則是懸浮替換.
2. tabbox中的幾個內容塊，你可以留意到，第一個沒有添加style=”display:none”這句樣式化代碼，也就是說，第一個是默認顯示的，如果你想哪個內容塊默認顯示，則去除這句樣式化代碼，當然，只能同時讓其中一個內容塊沒有這句代碼。
差不多就這些了，希望對新手朋友有用。哦，對了，要讓TABMENU里面的標題并排顯示，當然還需要一些CSS定義，這里就不細說了，自己研究一下。
新聞熱點
疑難解答
圖片精選
