Tip: you can modify some code before running
Code of the tab switch for js + css instances with ultra-beautiful tabs<!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 inch wide screen LCD black-new eggs China</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">Back to top</label><ul class="tabHead" id="tabCot_product-li-currentBtn-"><li class="currentBtn">Product Description</li><li>Specification parameters</li><li>Packaging Information</li><li>Warranty terms</li></ul></div><div id="tabCot_product_1" class="tabCot"><table > <tr> <td > <p><u><b>Product Overview</b></u></p> <p>Product overview ..........<br />Product overview ..........<br />Product overview ..........<br />Product overview ..........<br />Product overview ..........<br />Product overview ..........<br /></p> </td> </tr></table><div class="clear"></div></div><div id="tabCot_product_2" class="tabCot" ><div>Specification parameters:<br />Disclaimer: The manufacturer will change the product packaging, origin or accessories without any prior notice, the new eggs cannot ensure that the goods received by the customer are completely consistent with the pictures, origins, and attachments on the website. Only genuine licensed from the original manufacturer can be ensured! And make sure that it is consistent with the mainstream new products on the market at that time. If the website is not updated in time, please forgive me!</div><div class="clear"></div></div><div id="tabCot_product_3" class="tabCot" ><div>Disclaimer: The manufacturer will change the product packaging, origin or accessories without any prior notice, the new eggs cannot ensure that the goods received by the customer are completely consistent with the pictures, origins, and attachments on the website. Only genuine licensed from the original manufacturer can be ensured! And make sure that it is consistent with the mainstream new products on the market at that time. If the website is not updated in time, please forgive me!</div><div class="clear"></div></div><div id="tabCot_product_4" class="tabCot" ><div>Warranty terms:<br />Disclaimer: The manufacturer will change the product packaging, origin or accessories without any prior notice, the new eggs cannot ensure that the goods received by the customer are completely consistent with the pictures, origins, and attachments on the website. Only genuine licensed from the original manufacturer can be ensured! And make sure that it is consistent with the mainstream new products on the market at that time. If the website is not updated in time, please forgive me!</div><div class="clear"></div></div><div class="modBottom"> </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 switch class 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 usage: new tab (tag ID, id separator, click the trigger function, and click the event to trigger the TAB switch). Label ID: ID name format: prefix + delimiter + HTML tag name of TAB + tag style in active State + separator + tag style in inactive state (required) id separator: separator (required) trigger function during TAB switching: (optional) events that trigger the function during TAB switching: optional (onclick by default) note: the prefix of a tag ID is used as the new ID value of the tag. Therefore, the prefix should not be the same as the ID value of any element. return value: the object of the tag ID. project name naming rules for tag switching: prefix + _ + sequence value. For details, refer to the code above. For example, the object with ID "test3_li_now _" indicates: the prefix is test3li and the id is "test3_li_now. now is the style when the label is activated. "" the last blank is the style in the inactive state. The ID of each element in the active state should be named: test3_1 the first tag corresponds to the project test3_2 the second tag corresponds to the project test3_3 the third tag corresponds to the project and so on */new tab ('tabcot _ product-li-currentBtn -', '-');</script></div></body></html>
Tip: you can modify some code before running
