提示：您可以先修改部分代碼再運行
javascript+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>javascript+css tab 切換菜單效果</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> <li>保修條款</li></ul></div><div id="tabCot_product_1" class="tabCot"><table > <tr> <td > <p><u><b>產品概述</b></u></p> <p></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 id="tabCot_product_5" 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 || 'onmouseover';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;}}new tab('tabCot_product-li-currentBtn-', '-');</script></div></body></html>
提示：您可以先修改部分代碼再運行
