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

javascript实现不同颜色Tab标签切换效果_ 这篇文章主要为大家具体介绍了javascript实现不同颜色Tab标签切换效果，具有肯定的参考价值，感爱好的小伙伴们可以参考一下 本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码，供大家参考，具体内容如下 具体代码： html head title不同颜色选项卡/title meta http-equiv=Content-Type content=text/html; charset=gb2312/ style type=text/css * margin: 0; padding: 0; body font: 12px/20px microsoft yahei, arial; word-break: break-all; word-wrap: break-word; .clearfix:after content: .; display: block; clear: both; height: 0; visibility: hidden; .clearfix display: inline-block; * html .clearfix height: 1%; .clearfix display: block; #wrap width: 320px; margin: 2em auto; .card_List height: 30px; border-bottom: 1px solid #f00; position: relative; .card_List li float: left; width: 68px; text-align: center; height: 30px; line-height: 30px; margin: 0 5px; display: inline; border-top-left-radius: 6px; border-top-right-radius: 6px; .card_List li.current height: 34px; line-height: 34px; margin-top: -4px; border: 1px solid #F00; background: #FF9494; border-bottom: none; color: #fff; #oLi li:nth-child(1) background: #FF9494; #oLi li:nth-child(2) background: #8CFE8C; #oLi li:nth-child(3) background: #6969FB; #oLi li:nth-child(4) background: #FFE26F; .card_content div display: none; height: 100px; text-align: center; color: #000; .card_content div:first-child background: #fff; /style script type=text/javascript window.onload = function () var colorArr = 0:#f00, 1:#0f0, 2:#00f, 3:#FC0 ; var bgColorArr = 0:#fff, 1:#fff, 2:#fff, 3:#fff, var oL = document.getElementById(oLi); var oLi = oL.getElementsByTagName(li); var oUl = document.getElementById(oUl).getElementsByTagName(div); for ( var i=0 ; ioLi.length ; i+ ) oLii.index = i; oLii.onclick = function () for ( var j = 0 ; j oLi.length ; j+ ) oLij.className = ; oLij.style.border = none; this.className = current; this.style.border = 1px solid + colorArrthis.index; this.style.borderBottom = none; oL.style.borderBottom = 1px solid + colorArrthis.index; for ( var j=0 ; j oUl.length ; j+ ) oUlj.style.display = none; oUlthis.index.style.display = block; oUlj.style.backgroundColor = bgColorArrthis.index; ; ; /script /head body div id=wrap ul id=oLi class=card_List clearfix li class=current1/li li2/li li3/li li4/li /ul div id=oUl class=card_content div style=display:block; 11111111111111 /div div 22222222222 /div div 3333333333333 /div div 44444444444444444 /div /div /div /body /html 以上就是本文的全部内容，盼望对大家的学习有所关心。 .