效果圖：
代碼：切換效果，要點擊才能實現。
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" style="overflow:hidden;"> <div id="tabCot_product" class="tab"> <div class="tabContainer"> <label class="backTop"><a href="#" title="回到頂部">回到頂部</a></label> <ul class="tabHead" id="tabCot_product-li-currentBtn-"> <li class="currentBtn"><a href="javascript:void(0)" title="產品描述" rel="1">產品描述</a></li> <li><a href="javascript:void(0)" title="規格參數" rel="2">規格參數</a></li> <li><a href="javascript:void(0)" title="包裝信息" rel="3">包裝信息</a></li> <li><a href="javascript:void(0)" title="保修條款" rel="4">保修條款</a></li> </ul> </div> <div id="tabCot_product_1" class="tabCot"> <table style="border-style:none;"> <tr> <td style="border-style:none; padding:0px;"> <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" style="display: none;"> <div>規格參數：<br />聲明：因廠家會在沒有任何提前通知的情況下更改產品包裝、產地或者一些附件，新蛋不能確保客戶收到的貨物與網站的圖片、產地、附件說明完全一致。只能確保為原廠正品行貨！並且保證與當時市場上同樣主流新品一致。若網站沒有及時更新，請大家諒解！</div> <div class="clear"></div> </div> <div id="tabCot_product_3" class="tabCot" style="display: none;"> <div>聲明：因廠家會在沒有任何提前通知的情況下更改產品包裝、產地或者一些附件，新蛋不能確保客戶收到的貨物與網站的圖片、產地、附件說明完全一致。只能確保為原廠正品行貨！並且保證與當時市場上同樣主流新品一致。若網站沒有及時更新，請大家諒解！</div> <div class="clear"></div> </div> <div id="tabCot_product_4" class="tabCot" style="display: none;"> <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_" 的對象代表的意思是: 前綴為 test3 li 為 id為 "test3_li_now_" 標簽下面的 li 標簽 做為TAB項. now 為 標簽激活時的樣式 "" 最后的空為 非激活狀態下的樣式 每個標簽項 激活 狀態下對應的元素的ID應該命名為: test3_1 第一個標簽項對應項目 test3_2 第二個標簽項對應項目 test3_3 第三個標簽項對應項目 等等 */ new tab('tabCot_product-li-currentBtn-', '-'); </script> </div> </body> </html>