本文实例讲述了js实现TAB切换对应不同颜色的代码。分享给大家供大家参考。具体如下：
这是一个个性化的TAB菜单，每个TAB卡片的背景颜色都不相同，鼠标点击上部的TAB，在主体内容区可看到颜色的变化。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-cha-tab-color-nav-codes/
具体代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>不同颜色选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <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: white; } .card_content div:first-child { background: #FF9494; } </style> <script type="text/javascript"> window.onload = function () { var colorArr = { 0:"#f00", 1:"#0f0", 2:"#00f", 3:"#FC0" }; var bgColorArr = { 0:"#FF9494", 1:"#8CFE8C", 2:"#6969FB", 3:"#FFE26F", } 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> |
希望本文所述对大家的javascript程序设计有所帮助。
转自：https://www.jb51.net/article/71760.htm