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 ; i<oLi.length ; i++ ）{oLi[i].index = i;oLi[i].onclick = function （） {for （ var j = 0 ; j < oLi.length ; j++ ）{oLi[j].className = "";oLi[j].style.border = "none";}this.className = "current";this.style.border = "1px solid " + colorArr[this.index];this.style.borderBottom = "none";oL.style.borderBottom = "1px solid " + colorArr[this.index];for （ var j=0 ; j < oUl.length ; j++ ）{oUl[j].style.display = "none";oUl[this.index].style.display = "block";oUl[j].style.backgroundColor = bgColorArr[this.index];}};}}; </script> </head><body><div id="wrap"><ul id="oLi" class="card_List clearfix"><li class="current">1</li><li>2</li><li>3</li><li>4</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>

以上就是本文的全部内容，希望对大家的学习有所帮助。