JS DIV CSS排版布局实现美观的选项卡效果

本文实例讲述了JS DIV CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下：

这是一个基于Java脚本语言的简单选项卡代码，陪新手练习一下Div CSS排版的技巧，本选项卡可以继续美化修饰完善，选项卡在目前在众多网站上应用广泛，确实是一个很不错的网页布局方法。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titleDIV CSS排版/titlestyle type='text/css '！-车身，ul { margin:0划水：0;列表式：无；font:12px '宋体；}.测试{ width :500 pxmargin :20 px汽车；高度：150 px背景： URL(' images/9zrgo 3。jpg’)重复-x 0 33px；}.测试ul Li { float : leftadding :2 px 1px 6px 1px background : URL(' images/11 abdrs。jpg ')无重复0 0；}.测试保险商实验所阿利{ color: # 000宽度：95 px文本装饰：无；显示：块；高度：27 px线高：31 px文本对齐：居中；飞越：隐藏；}.测试ul阿利：悬停{ color : # 30F背景：#FFF网址(“images/2vi1df8.jpg”)重复-x 0 0px；}.测试ul Li . yes { padd :0 border : none }。测试ul li.yes a { color: # 30F宽度宽度：112像素宽度：35像素线高：40 px显示：块；字体粗细：加粗；边距-底部：-5px；背景： URL(' images/27zgcqc。jpg’)无重复0px 0；飞越：隐藏；} .内容{行高：50 px文本对齐：居中；font-size :20 pxcolor : red height :112 pxborder : # F8 BE05 2px实心；边框-top :无；clear:both背景# ECED78}。否{ display:none}-/style脚本类型=' text/JavaScript '语言=' JavaScript '函数test _ item(n){ var menu=document。getelementbyid('菜单')；var menuli=菜单。getelementsbytagname(' Li ')；for(var I=0；长度；我.类名=menuli[n].是文档.getelementbyid(' test ' I).nodocument .getelementbyid(' test ' n).' { content } }/script/head dydiv=' test ' ul id=' menu ' Li class=' yes ' onclick=' JAVAScript : test _ item(0)；'a href='#' onfocus='this.blur()'首页/a/Li Li onclick=' JavaScript : test _ item(1)；'a href='#' onfocus='this.blur()'连接一/a/Li Li onclick=' JavaScript : test _ item(2)；'a href='#' onfocus='this.blur()'连接二/a/Li Li onclick=' JavaScript : test _ item(3)；'a href='#' onfocus='this.blur()'连接三/a/Li Li onclick=' JavaScript : test _ item(4)；'a href='#' onfocus='this.blur()'连接四/a/Li/ul div class=' content ' id=' test0 '首页内容/div div id='test1' class='no '连接一内容/div div id='test2' class='no '连接二内容/div div id='test3' class='no '连接三内容/div div id='test4' class='no '连接四内容/div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。