本文实例讲述了JS CSS实现的经典标签选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款经典的JavaScript CSS选项卡选项卡代码，由以前的一款改写而成，自认为不错的东西，发上来分享吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题选项卡/title脚本类型=' text/JavaScript '/脚本样式类型=' text/CSS ' * { margin :0；划水：0;断字：断字；} h1、h2、h3、h4、h5、h6 { font-size :1 em} a { color: # 333文本装饰：无；} a :悬停{ text-decoration :下划线；} ul、李{列表式：无；} fieldset，img { border : none } # hot news { width :260 pxmargin :1 px左边距左：auto右边距：汽车；font-size :12 px} # hot news _ caption { width :260 px；飞越：隐藏；边框-bottom:1px实心# FAFAFA} #热点新闻_字幕ul { float : right} #热点新闻_字幕ul Li { float : left左边框：1px实心# FFF；宽度：85 px线高：25 px文本对齐：居中；光标：指针指针；font-size :12 px} #hotnews_caption .普通{ background : # E4E4E 4 } # hot news _ caption .当前{ background : # c 2130 ecolor : # FFF；} #热点新闻_内容{ } #热点新闻_内容.普通{ display : none } # hot news _ content .当前{ display : block } # hot news _ content ul { padd :8 px 0 0 5px；} #hotnews_content ul阿利{ font-size :12 px字母间距：1 pt线高：14 pt}/style脚本类型=' text/JavaScript '函数secBoard(elementID，listName，n){ var elem=document。getelementbyid(元素id)；var elem list=elem。getelementsbytagname(' Li ')；for(var I=0；ielemlist . lentigi){ elem list[I].^ 1；文件。getelementbyid(列表名称' _ ' m).normal} elemlist[n-1].当前文档。getelementbyid(listName ' _ ' n).'当前}/脚本/头体样式='页边距-top :15 px；'div id=' hot news ' div id=' hot news _ caption ' ul Li class=' current ' on mouse over=' SecBoard '(hot news _ caption '，' list '，1)；'数字商务平台/Li Li class=' normal ' on mouse over=' SecBoard '(hot news _ caption '，' list '，2)；'第四代移动通信技术传真传真服务/Li Li class=' normal ' on mouse over=' SecBoard '(hot news _ caption '，' list '，3)；'信息安全服务/Li/ul/div div id=' hot news _ content ' div class=' current ' id=' list _ 1 ' ul lia href='产品。aspx ' target=' _ top '全真通数字商务平台是基于公开密钥基础设施体系，通过加密、签名、认证等手段，依据我国的数字签名法，在互联网上建立的一套安全、可信、具有法律效力的电子文件交换平台。为数字商务和数字政务服务！是我国数字签名法最有价值的推广应用产品！/a/Li/ul/div class=' normal ' id=' list _ 2 ' ul lia href=' products。aspx ' target=' _ top '基于数字中继和模拟线路并结合互联网形成了面向企业和政府用户传真收发服务的传真服务系统，集传真的管理和收发于一体，为企业和政府提供智能传真解决方案/a/Li/ul/div class=' normal ' id=' list _ 3 ' ul lia href='产品。aspx ' target=' _ top '基于公开密钥基础设施体系，结合数字证书的应用为企业和政府提供的身份认证、加密、签名的技术解决方案，实现用户身份的可鉴别性、通道的安全性、文件的安全性、主机的安全性等系列产品/a/Li/ul/div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。