最近在做林州國富科技 這個網站時，寫了一個tab,還不錯，拿來分享一下，html代碼如下
<style>
/*============tab選項卡============*/
#tab_body{height:300px; overflow:auto; padding:10px 20px;}
#tab_nav{background:transparent url(Images/gray_line.gif) repeat-x left bottom; height:28px; line-height:28px; overflow:hidden; list-style:none;}
#tab_nav li{cursor:pointer; float:left; background:transparent url(Images/tab.gif) no-repeat left -28px; height:100%; width:93px; text-align:center; margin-right:5px;font-weight:normal;/*width:81px;*/}/*實際寬度109*/
#tab_nav li.s{font-weight:bold; background-position:left 0px;}
.tab_div{display:block;}
.tab_undiv{display:none;}
/*============tab選項卡============*/
</style>
<ul id="tab_nav" class="left_pad">
<li class="s">公司簡介</li>
<li>公司理念</li>
<li>公司文化</li>
</ul>
<div id="tab_body">
<div class="tab_div">
<p class="p_indent">林州市國富科技廣告印務有限公司是集廣告策劃、電腦創意、彩印包裝、廣告發布、商務開發、影視製作、高等教育爲一體的高科技企業。現有員工150餘人，其中電腦設計人員20餘名，註冊資金500萬元，資產3000萬元，建築面積26000餘平米。近年來，公司自籌資金1500餘萬元，引進了現代化的電腦創意、彩色印刷及後加工設備，形成了以印刷爲龍頭，廣告策劃、電腦創意、彩印包裝、廣告發布、商務開發、影視製作、高等教育多業並興舉的科技企業。下高國富科技彩印廠、國富電腦創意中心、國富科技影視製作中心、國富勞務輸出中心、CIS企業形象策劃中心、林州市太行文化傳播公司、國富職業培訓學校、河南廣播電視大學林州國富學院等，是河南省出版定點印刷企業、省出版集團成員企業，河南省優秀民營企科技企業。</p>
<p class="p_indent"> 公司董事長原國富，任林州市民間文藝協會副主席、林州市攝影協會常務理事，榮獲河南省“2003年度十大創業之星”、河南省“再就業先進個人”、林州市“十大科技標兵”等榮譽稱號。總經理李豔芳，任政協林州市常委，林州市工商聯合會副會長，多次受到省、市、縣的表彰，被評爲“河南省優秀民營企業家”、“安陽市優秀民營企業家”、“林州市社會主義優秀建設者”等。</p>
<p class="p_indent">公司自創業伊始，確立了“發展文化產業，振興區域經濟”的企業目標，在全體員工中形成了“不忘先賢，開拓創新，傳承文明，制印未來”的堅定信念。採取“引進來，送出去”的方式，來斷加大對員工的科技培訓，確保了公司長盛不衰的科技領先地位。團結協作的團隊精神，視質量爲生命的服務意識，構成了國富科技企業文化的豐富內涵，成爲公司不斷髮展的力量源泉。</p>
</div>
<div class="tab_undiv">
國富科技
，傳播文化，印行天下。<br />
國富科技，與世紀同步，與科技同行，與時尚同在；<br />
國富科技，你的性格，奮飛剛毅；<br />
你的信念，發展文化產業，振興區域經濟；<br />
你的目標，弘揚印刷業，光大電腦業。<br />
國富科技，你憑藉堅強的毅力發展經濟；<br />
國富科技感召着每個人勤奮工作，無私奉獻，獲得成功！<br />
國富人是勤勞勇敢的拓荒者，<br />
爲您策劃、撰文、攝影、創意，全方位打造企業形象，<br />
讓您的產品橫空出世，驚天動地；<br />
國富科技，橫跨時空，超越自然，追求品質；<br />
您推動了印刷業、電腦業的一次技術革命，<br />
您用實踐證明了科技是第一生產國，<br />
您真正的成爲了行業的化身和代言人。<br />
國富科技，<br />
捐助希望工程、擁軍優屬、扶貧助學、解決待業青年就業，<br />
在造福社會的同時發展自己。<br />
國富科技，您是一串催人奮進的音符，是一盞充滿智慧和希望的明燈；<br />
國富科技，您是一艘航母，帶領各企業走向美好的明天。<br />
國富科技，<br />
我們因您的光榮而自豪，國您的追求而拼搏，<br />
因您的存在而感到我們生命的無限意義；<br />
今天，國富科技在飛速發展，<br />
未來，國富科技將更加輝煌絢麗！
</div>
<div class="tab_undiv">
<p align="right"><strong>科技融入生活 文化鑄就品牌</strong></p>
民營企業可持續發展的基石是企業文化建設，國富科技始終把企業文化建設貫穿於公司創業全過程.提出了“駕馭世紀高科,描繪錦繡江山,經緯天地色彩,塑造美好人間”的企業理念,把“業無窮,勤有價,耕耘爲天下”當作人生和企業的信條,在印刷廠內雕塑了世界印刷始祖畢昇手端模板,目眺遠方的塑像,全體員工每天早晨迎着晨曦在像前宣誓,朗誦《國富科技
之歌》，在全體員工中形成了“以畢昇爲榜樣，弘揚印刷業，爲民族爭氣”的堅定信念，樹立了“傳承文明，制印未來”的企業理想。採取引進來，送出去的方式，不斷加大對員工的科技培訓，先後投資20餘萬元，聘請林州高等院校教授來林培訓員百餘次，派遣200餘人次赴北京、鄭州等地參加長期培訓，使員工個個成爲專業的佼佼者，確保了公司長盛不衰的科技領先地位。
</div>
</div>
js代碼如下
// JavaScript Document
var Class = {
create: function(){
return function(){
this.initialize.apply(this, arguments);
}
}
}
var tab=Class.create();
tab.prototype={
initialize: function(){
var tab_nav = document.getElementById("tab_nav").getElementsByTagName("li");
//alert(tab_nav.length);
var tab_body = document.getElementById("tab_body");
//alert(p1.childNodes.length);
var tab_div_Array=new Array();
for(var ii=0;ii<tab_body.childNodes.length;ii++)
{
if(tab_body.childNodes[ii].nodeType==1)
tab_div_Array.push(tab_body.childNodes[ii]);
/*document.write("Nodename: " + p1.childNodes[i].nodeName)
document.write(" NodeValue: " + p1.childNodes[i].nodeValue)
document.write(" (nodetype: " + p1.childNodes[i].nodeType + ")<br />")*/
}
//alert(tab_div_Array.length);
for(var i=0;i<tab_nav.length;i++)
{
tab_nav[i].index=i; //延長生存週期
tab_nav[i].οnmοuseοver=function(){
//alert(this.innerHTML);
for(var j=0 ; j<tab_nav.length ; j++){
tab_nav[j].className="";
tab_div_Array[j].className="tab_undiv";
//alert("j---"+j);
};
this.className="s";
//alert(i);
tab_div_Array[this.index].className="tab_div";
}
//alert(i);
}
}
}
var tab_instantiation=new tab();
圖片爲