提示：您可以先修改部分代碼再運行
js+css執行個體超漂亮tab切換選項卡代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>SAMSUNG 三星 943NW+PLUS 19英寸 寬屏液晶顯示器 黑色 - 新蛋中國</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" type="text/css" href="http://c1.neweggimages.com.cn/WebResources/2009/Default/Css/frame091107.css" /></head><body><div id="wrap"><div id="body"><div id="main" ><div id="tabCot_product" class="tab"><div class="tabContainer"><label class="backTop">回到頂部</label><ul class="tabHead" id="tabCot_product-li-currentBtn-"><li class="currentBtn">產品描述</li><li>規格參數</li><li>封裝資訊</li><li>保修條款</li></ul></div><div id="tabCot_product_1" class="tabCot"><table > <tr> <td > <p><u><b>產品概述</b></u></p> <p>產品概述內容..........<br />產品概述內容..........<br />產品概述內容..........<br />產品概述內容..........<br />產品概述內容..........<br />產品概述內容..........<br /></p> </td> </tr></table><div class="clear"></div></div><div id="tabCot_product_2" class="tabCot" ><div>規格參數：<br />聲明：因廠家會在沒有任何提前通知的情況下更改產品封裝、產地或者一些附件，新蛋不能確保客戶收到的貨物與網站的圖片、產地、附件說明完全一致。只能確保為原廠正品行貨！並且保證與當時市場上同樣主流新品一致。若網站沒有及時更新，請大家諒解！</div><div class="clear"></div></div><div id="tabCot_product_3" class="tabCot" ><div>聲明：因廠家會在沒有任何提前通知的情況下更改產品封裝、產地或者一些附件，新蛋不能確保客戶收到的貨物與網站的圖片、產地、附件說明完全一致。只能確保為原廠正品行貨！並且保證與當時市場上同樣主流新品一致。若網站沒有及時更新，請大家諒解！</div><div class="clear"></div></div><div id="tabCot_product_4" class="tabCot" ><div>保修條款：<br />聲明：因廠家會在沒有任何提前通知的情況下更改產品封裝、產地或者一些附件，新蛋不能確保客戶收到的貨物與網站的圖片、產地、附件說明完全一致。只能確保為原廠正品行貨！並且保證與當時市場上同樣主流新品一致。若網站沒有及時更新，請大家諒解！</div><div class="clear"></div></div><div class="modBottom"> <span class="modABL"></span> <span class="modABR"></span></div></div></div><div class="clear"></div></div></div><div class="noprint"><script type="text/javascript" language="jscript">function tab(o, s, cb, ev){//tab切換類var $ = function(o){return document.getElementById(o)};var css = o.split((s||'_'));if(css.length!=4)return;this.event = ev || 'onclick';o = $(o);if(o){this.ITEM = [];o.id = css[0];var item = o.getElementsByTagName(css[1]);var j=1;for(var i=0;i<item.length;i++){if(item[i].className.indexOf(css[2])>=0 || item[i].className.indexOf(css[3])>=0){if(item[i].className == css[2])o['cur'] = item[i];item[i].callBack = cb||function(){};item[i]['css'] = css;item[i]['link'] = o;this.ITEM[j] = item[i];item[i]['Index'] = j++;item[i][this.event] = this.ACTIVE;}}return o;}}tab.prototype = {ACTIVE:function(){var $ = function(o){return document.getElementById(o)};this['link']['cur'].className = this['css'][3];this.className = this['css'][2];try{$(this['link']['id']+'_'+this['link']['cur']['Index']).style.display = 'none';$(this['link']['id']+'_'+this['Index']).style.display = 'block';}catch(e){}this.callBack.call(this);this['link']['cur'] = this;}}/*tab 使用方法:new tab(標籤ID, id分隔字元, 單擊事觸發函數, 什麼事件觸發TAB切換);標籤ID:ID命名格式為: 首碼+分隔字元+TAB標籤的HTML標籤名+啟用狀態下標籤樣式+分隔字元+非啟用狀態下標籤樣式(必須)id分隔字元:分隔字元(必須)TAB切換時觸發函數:TAB切換時觸發函數(可選)什麼事件觸發TAB切換:可選(預設為onclick)注:標籤ID命名時的首碼將做為 該標籤的新ID值,所以首碼不要與現在任何元素的ID值相同.傳回值為: 標籤ID所對象的對象.切換標籤時對應的 項目名稱命名規則:首碼+_+順序值具體理解,可以看上面的代碼,比如ID為 "test3_li_now_" 的對象代表的意思是:首碼為 test3li為 id為 "test3_li_now_" 標籤下面的 li 標籤 做為TAB項.now為 標籤啟用時的樣式""最後的空為 非啟用狀態下的樣式每個標籤項 啟用 狀態下對應的元素的ID應該命名為:test3_1第一個標籤項對應項目test3_2第二個標籤項對應項目test3_3第三個標籤項對應項目等等*/new tab('tabCot_product-li-currentBtn-', '-');</script></div></body></html>
提示：您可以先修改部分代碼再運行
