本文实例讲述了射流研究…实现拉环切换对应不同颜色的代码。分享给大家供大家参考。具体如下：

这是一个个性化的拉环菜单，每个拉环卡片的背景颜色都不相同，鼠标点击上部的TAB、在主体内容区可看到颜色的变化。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-cha-tab-color-nav-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 meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '/style type=' text/CSS ' * { margin : 0；padd : 0；} body { font : 12px/20px ' Microsoft yahei '，' arial '；断字：断字；单词包装：断字；} .clearfix:after在{ content:'之后。显示器：块；clear:两者；高度： 0;可见性：隐藏；} .clearfix { display:内联块；} * html .清除固定{高度：1%；} .clearfix { display:块；} #包装{ width : 320 pxmargin : 2em auto }。card _ List { height : 30pxborder-bottom : 1px实心# f00相对位置：} .卡片列表li {左侧浮动：宽度： 68px文本对齐：中心；高度： 30px线高： 30px边距： 0 5pxdisplay:内联边框-左上角-半径： 6px边框-右上角-半径： 6px} .卡_列表李。当前{ height : 34px线高： 34px边距-top :-4px；border: 1px固体# F00背景# ff 9494边框-底部：无；color : # fff } # OLi Li : th-child(1){ background : # FF9494；} # OLi Li : th-child(2){背景： # 8CFE8C} # OLi Li : th-child(3){背景： # 6969 FB} # OLi Li : th-child(4){背景： # FFE 26F；} .card _ content div { display : none；高度： 100像素；文本对齐：中心；颜色：白色；} .card _ content div:first第一个孩子{ background: # FF9494}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var colorar={ 0: ' # f00 '，1:'#0f0 '，2:'#00f '，333: ' # FC0 ' }；var bgColorArr={ 0: ' # FF9494 '，1:'#8CFE8C '，2:'#6969FB '，3:'#FFE26F '，} var oL=document。getelementbyid(' OLi ')；var OLi=ol。getelementsbytagname(' Li ')；var OUl=文档。getelementbyid(' OUl ').getElementsByTagName(' div ')；for(var I=0；长度；i ){ oLi[i].索引=我；奥利[一].onclick=function(){ for(var j=0；j . OLi . length j){ OLi[j].className=oLi[j]。风格。边框=“无”；} this.className=' currentthis。风格。border=' 1px solid ' colorar[this。索引]；这个。风格。borderbottom=' noneol。风格。borderbottom=' 1px solid ' colorar[this。索引]；for(var j=0；OUl[j]。风格。显示='无'；这个。索引]。风格。display=' blockoUl[j]。风格。背景色=bgcolorar[这个。索引]；} };} };/script/head body div id=' wrap ' ul id=' OLi ' class=' card _ List clear fix ' Li class=' current ' 1/Li Li 2/Li Li/Li Li 4/Li/ul div id=' OUl ' class=' card _ content ' div style=' display : block；'111111111111111/div 22222222/div 333333333/div 4444444/div/div/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。