我自己编写的一个tab

最近在做林州国富科技 这个网站时，写了一个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();

图片为