javascript实现不同颜色标签标签切换效果

本文实例为大家分享了爪哇岛描述语言不同颜色标签标签切换效果的实现代码，供大家参考，具体内容如下

具体代码：

超文本标记语言标题不同颜色选项卡/title meta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/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像素；文本对齐：中心；color: # 000}。card _ content div :第一个孩子{背景： # fff}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var colorar={ 0: ' # f00 '，1:'#0f0 '，2:'#00f '，333: ' # FC0 ' }；var bgColorArr={ 0: ' # fff '，1:'#fff '，2:'#fff '，3:'#fff '，} 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以上就是本文的全部内容，希望对大家的学习有所帮助。