JS实现简单的标签切换选项卡效果

本文实例讲述了射流研究…实现简单的标签切换选项卡效果。分享给大家供大家参考，具体如下：

！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 ' meta charset=' UTF-8 ' head title js自制简单使用的选项卡/title style type=' text/CSS ' * { margin :0 px；padd :0 px } # Tabwarp { width :400 px高度：300 pxborder:1px固体# cccmargin:10px汽车；} # TabMenu { width :400 pxh three :25 px飞越：隐藏；边框-底部：1px实心# cccmargin-top :5 px；} # TabMenu ul Li { width :80 pxfloat : leftlist-style : none；font-size :12 px线高：25 px高度：25px文本对齐：居中；color: # 0066CCcursor:pointer指针指针；边框-左侧：1px实心# cccborder-right:1px实心# cccborder-top:1px实心# cccmargin :0 px 5px } # TAb menu ul Li。curent { font-size :13 px背景# FBF5E1font-weight :粗体；color : # FF6600 } # TabContent { width :390 px高度：360 pxpadd :5 px font-size :12 px；}#tabContent .隐藏{ display : none }/style/head dyh 1 id=' what '/h1 div id=' tabWarp ' div id=' tabMenu ' ul Li class=' curent '中餐/li li西餐/li li亚洲菜/li li河南菜/Li/ul/div div id=' TabContent ' div p中餐的内容/p /div div class='hide' p西餐的内容/p /div div class='hide' p亚洲菜的内容/p /div div class='hide' p河南菜的内容/p/div/div脚本函数fgTab(tabNav，tabBody){ var tabMenu=document。getelementbyid(TabNav)；var TABtitle=TABmenu。GetElementsBytagname(' Li ')；var标签内容=文档。getelementbyid(选项卡体)；var TabBody=TabContent。GetElementsBytagname(' div ')；函数switchTab(i){ tabTitle[i].onmouseover=function(){ for(j=0；jtabtitle . length j){ if(I==j){ tabbtitle[j].curenttab正文[j]。风格。display=' block}else{ tabTitle[j].className=选项卡正文[j]。风格。显示='无'；} }//文档。getelementbyid(' what ').innerHTML=I ' br/' out()；} } for(I=0；itabTitle.lengthI){ SwitCh选项卡(I)；} }函数out(){ 0返回I ' br/' j；}/scriptscript fgTab('tabMenu '，' TabContent ')；/脚本/正文/html运行效果图如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。