我自己编写的一个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();

图片为

我自己编写的一个tab相关推荐

本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
使用c语言编程首先要新建,【C语言编程入门系列】—— 第三章，编写第一个C语言程序！...
导读:一般学一门计算机语言的第一堂上机课("上机"顾名思义,上计算机,机你太美),就是往屏幕输出"hello world",本章也不例外. 3.1 Hello, ...
C语言编程入门之--第三章编写第一个C语言程序
导读:一般学一门计算机语言的第一堂上机课("上机"顾名思义,上计算机,机你太美),就是往屏幕输出"hello world",本章也不例外. 3.1 Hell ...
请编写出一个html页面令其输出,javaweb程序设计案例教程_课后习题1.pdf
第一章 [测一测] 学习完前面的内容,下面来动手测一测吧,请思考以下问题: 1.请描述HTML .CSS. .JavaScript 分别表示的含义. 2 .请列举出HTML 常用的标记.(至少10 个 ...
iOS 11开发教程（七）编写第一个iOS11代码Hello,World
iOS 11开发教程(七)编写第一个iOS11代码Hello,World 代码就是用来实现某一特定的功能,而用计算机语言编写的命令序列的集合.现在就来通过代码在文本框中实现显示"Hello, ...
iOS 11开发教程（二）编写第一个iOS 11应用
iOS 11开发教程(二)编写第一个iOS 11应用编写第一个iOS 11应用本节将以一个iOS 11应用程序为例,为开发者讲解如何使用Xcode 9.0去创建项目,以及iOS模拟器的一些功能.编 ...
iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序
iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序程序是为了实现特定目标或解决特定问题而用计算机语言编写的命令序列的集合.本章将以编写第一个Sprite Kit程序为 ...
Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序
Xamarin iOS开发实战第1章使用C#编写第一个iOS应用程序 C#原本是用来编写Windows以及Windows Phone的应用程序.自从Xamarin问世后,C#的作用就发生了很大的变化. ...
编写了一个通过手机短信平台收发短信的软件
看过我写的"使用Ajax技术编写的一个网站"这篇博客的网友也许已经知道我现在是做什么工作的了.由于工作的原因,需要在网络上从事一些进行商业营销的活动,以帮助工作的开展.比如:介绍公 ...

我自己编写的一个tab

我自己编写的一个tab相关推荐

最新文章

热门文章