이 기사는 참조를 위해 다양한 색상의 JavaScript 탭 태그의 효과를 전환하기위한 구현 코드를 공유합니다. 특정 내용은 다음과 같습니다
특정 코드 :
<html> <head> <title> 다른 색상의 태그 </title> <meta http-equiv = "content-type"content = "text/html; charset = gb2312"/> <style type = "text/css"> * {margin : 0; 패딩 : 0; } body {font : 12px/20px 'Microsoft Yahei', 'arial'; 단어 브레이크 : 브레이크-alf; Word-Wrap : 브레이크 워드; } .ClearFix : {content : '.'이후; 디스플레이 : 블록; Clear : 둘 다; 높이 : 0; 가시성 : 숨겨진; } .ClearFix {디스플레이 : 인라인 블록; } * html .ClearFix {높이 : 1%; } .ClearFix {display : 블록; } #wrap {너비 : 320px; 여백 : 2em Auto; } .card_list {높이 : 30px; 국경 바닥 : 1px 고체 #f00; 위치 : 상대; } .card_list li {float : 왼쪽; 너비 : 68px; 텍스트 정렬 : 센터; 높이 : 30px; 라인 높이 : 30px; 여백 : 0 5px; 디스플레이 : 인라인; 경계 왼쪽-라디우스 : 6px; 국경-오른쪽 라디우스 : 6px; } .card_list li.current {높이 : 34px; 라인 높이 : 34px; 마진 -탑 : -4px; 테두리 : 1px 고체 #f00; 배경 : #FF9494; 국경 바닥 : 없음; 색상 : #fff; } #Oli li : nth-Child (1) {배경 : #ff9494; } #Oli li : nth-Child (2) {배경 : #8cfe8c; } #Oli li : nth-Child (3) {배경 : #6969fb; } #Oli li : nth-Child (4) {배경 : #ffe26f; } .card_content div {display : none; 높이 : 100px; 텍스트 정렬 : 센터; 색상 : #000; } .CARD_CONTENT DIV : First-Child {배경 : #fff; } </style> <script type = "text/javaScript"> window.onload = function () {var colorarr = {0 : "#f00", 1 : "#0f0", 2 : "#00f", 3 : "#fc0"}; var bgcolorarr = {0 : "#ffff", 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; oul [this.index] .style.display = "block"; oul [j] .style.backgroundcolor = bgcolorarr [this.index]; }}; }}; </script> </head> <body> <div id = "랩"> <ul id = "oli"> <li> 1 </li> <li> 2 <li> 3 </li> <li> 4 </li> </ul> <div id = "oul"> <div style = "block;"> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 초까지 </li> </ul> <div id = </div> <div> 333333333333333 </div> <div> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444 </div> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.