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

效果图如下：

完整实例代码：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 '/title www . JB 51 . net JS实现的拉环切换/title style type=' text/CSS ' # content { width : 400 px；高度： 200像素；} # tab _ bar { width : 400 pxheart : 20px向左浮动：} # tab _ bar ul { padd : 0pxmargin : 0pxh three : 20px文本对齐：中心；} #tab_bar li {列表样式-:型无；向左浮动：宽度： 133.3 px高度： 20像素背景-颜色：灰色；} .tab _ css { width: 400px高度： 200像素；背景-颜色：橙色；显示器：无；向左浮动：}/style script type=' text/JavaScript ' var my click=function(v){ var llis=document。getelementsbytagname(' Li ')；for(var I=0；长度；I){ var lli=llis[I]；if(lli==文档。getelementbyid(' tab ' v)){ lli。风格。背景颜色='橙色'；} else { lli。风格。背景颜色='灰色'；} } var divs=document。getelementsbyclassname(' tab _ CSS ')；for(var I=0；I div s . LengiI){ var div=div s[I]；if(div==文档。getelementbyid(' tab ' v ' _ content '){ div。风格。display=' block} else { div。风格。显示='无'；} } }/script/head body div id=' content ' div id=' tab _ bar ' ul Li id=' tab 1 ' onclick=' my click(1)' style='底色：橙色' tab 1/Li id=' tab 2 ' onclick=' my click(2)' tab 2/Li id=' tab 3 ' onclick=' my click(3)' tab 3/Li/ul/div class=' tab _ CSS ' id=' tab 1 _ content ' style=显示器：页面一/div/div class=' tab _ CSS ' id=' tab _ 2 _ content ' div页面二/div/div class=' tab _ CSS ' id=' tab _ 3 _ content ' div页面三/div /div /div /body/html感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试上述代码运行效果。

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

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