本文实例讲述了JS CSS实现仿微软网络服务风格选项卡效果代码。分享给大家供大家参考，具体如下：

这是一款来自微软网络网站的选项卡，清新淡蓝色风格，新闻类、资讯类、文章类网站都比较适合使用，代码扩展性高，W3C标准设计，兼容工业工程，火狐等多种浏览器，整体效果非常不错。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-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 ' head titlemsn选项卡/title style type=' text/CSS ' body { text-align : center；color : # 666 font-size :12 px；font-family:tahoma，arial，sans-serif；}h1、h2、h3、h4、h5、h6、form、div、p、I、img、ul、li、ol、table、tr、td、th、fieldset、标签、图例、按钮、输入{ margin:0划水：0;}李{列表式：无；} a img { border:none} a :链接{ text-decoration : none颜色： # 07519A} a :已访问{ text-摆设：无；color: # 07519A}a:active，a :悬停{ text-decoration :下划线；color: # 07519A}。tarea 0 {左侧浮动：高度：220 px宽度宽度：242px}。tarea { border:1px固体# acefloat:left高度：156 px文本对齐：居中；宽度宽度：242px}。tarea 1 { border :1 px solid # ace；float:leftheight:251px文本对齐：居中；宽度宽度：242px}。tarea 2 { border :1 px solid # ace；float:left高度：217 px文本对齐：居中；宽度宽度：243px} ul。tbtn Li {背景： # EBF3FBborder:1px实心# ace border-left : none；边框-top :无；color: # 07519Acursor:pointer指针指针；显示：块；float:leftheight:25px线高：25 px文本对齐：居中；文本装饰：无；宽度：60 px背景： URL(图片/msfp _ 015。gif)重复-x；} ul。李：悬停{文本装饰：下划线；} ul。李。curr {后台： # fff边框-底部-颜色： # fffcursor : defaultcolor : # 666 }。tbcon { margin :8 px 0px 6px 8pxtext-左对齐：padd :8 px }/style脚本语言=' JavaScript '类型=' text/JavaScript '函数tabit(BTN){ var idname=new String(BTN。id)；var s=idname。indexof(' _ ')；var e=idname。' _ '的LastIndex为1；var tabName=idname.substr(0，s)；var id=parseInt(idname.substr(e，1))；var Tabnumber=BTN。父节点。子节点。长度；for(I=0；itabNumberI){文档。getelementbyid(Tabname ' _ div _ ' I)。风格。显示='无'；文件。getelementbyid(Tabname ' _ BTN _ ' I).class name=}；文件。getelementbyid(Tabname ' _ div _ ' id)。风格。display=' blockbtn .类名=' curr }；/script/head dydiv class=' tarea 2 ' style=' height :223 px；ul=' tbtn ' Li onclick=' tabit(this)' id=' Taba P1 _ BTN _ 0 ' class=' curr '最新上传/Li Li onclick=' tabit(this)' id=' Taba P1 _ BTN _ 1 '分类导航/Li Li onclick=' tabit(this)' id=' Taba P1 _ BTN _ 2 '网页特效/Li Li style=' border-right :无；onclick=' tabit(this)' id=' Taba P1 _ BTN _ 3 '浏览排行/Li/ul div class=' clr '/div class=' tbcon ' id=' Taba _ div _ 0 '这里是最新上传的内容/div div style=' display : none；class='tbcon' id='tabap1_div_1 '这里是分类导航/div div style=' display : none；class='tbcon' id='tabap1_div_2 '网页特效的内容/div div style=' display : none；class='tbcon' id='tabap1_div_3 '浏览排行/div /div/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。