Este artículo comparte el código de implementación para cambiar los efectos de diferentes colores de las etiquetas de la pestaña JavaScript para su referencia. El contenido específico es el siguiente
Código específico:
<html> <cebe> <title> etiquetas de diferentes colores </title> <meta http-oquiv = "content-type" content = "text/html; charset = gb2312"/> <style type = "text/css"> * {margen: 0; relleno: 0; } Body {Font: 12px/20px 'Microsoft Yahei', 'Arial'; Descanso de palabras: quiebre; Word-Wrap: Break-Word; } .clearfix: After {content: '.'; Pantalla: bloque; claro: ambos; Altura: 0; Visibilidad: oculto; } .clearfix {display: inline-block; } * html .clearfix {altura: 1%; } .clearfix {display: block; } #Wrap {Width: 320px; Margen: 2em Auto; } .card_list {altura: 30px; Border-Bottom: 1px Solid #F00; Posición: relativo; } .card_list li {float: izquierda; Ancho: 68px; Text-Align: Center; Altura: 30px; Línea de altura: 30px; margen: 0 5px; Pantalla: en línea; border-top-izquierda-radio: 6px; border-top-right-radio: 6px; } .card_list li.current {altura: 34px; Línea-aguja: 34px; margen -top: -4px; Border: 1px Solid #F00; Antecedentes: #FF9494; Border-Bottom: Ninguno; Color: #fff; } #oli li: nth-child (1) {fondo: #ff9494; } #oli li: nth-child (2) {fondo: #8cfe8c; } #oli li: nth-child (3) {fondo: #6969fb; } #oli li: nth-child (4) {fondo: #ffe26f; } .card_content div {display: none; Altura: 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: "#ffff", 1: "#fff", 2: "#fff", 3: "#fff",} var ol = document.getElementById ("oli"); var oli = ol.getElementsBytagName ("li"); var oUl = document.getElementById ("oUl"). getElementsBytagName ("div"); para (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 = "Ninguno"; } this.classname = "actual"; this.style.border = "1px sólido" + colorarr [this.index]; this.style.borderbottom = "Ninguno"; ol.style.borderbottom = "1px sólido" + colorarr [this.index]; for (var j = 0; j <oUl.length; j ++) {oUl [j] .style.display = "none"; Oul [this.index] .style.display = "bloque"; Oul [j] .style.backgroundcolor = bgColorarr [this.index]; }}; }}; </script> </head> <body> <div id = "wrap"> <ul id = "oli"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </ul> <divi = "oul"> <div style = "Display: Block;" 1111111111111111111111111111111 </div> 2222222222222222222222222222222222222222222222222222222222222222INE. </div> <div> 3333333333333333 </div> <div> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 </div> </viV> </body> <html>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.