本文實例講述了js實現TAB切換對應不同顏色的代碼。分享給大家供大家參考。具體如下：
這是一個個性化的TAB菜單，每個TAB卡片的背景顏色都不相同，鼠標點擊上部的TAB，在主體內容區可看到顏色的變化。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-cha-tab-color-nav-codes/
具體代碼如下：
<!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程序設計有所幫助。
新聞熱點
疑難解答
