Este artigo compartilha o código de implementação para a comutação de efeitos de diferentes cores das tags de guia JavaScript para sua referência. O conteúdo específico é o seguinte
Código específico:
<html> <head> <title> Tags de cores diferentes </ititle> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <estilo type = "text/css"> * {margin: 0; preenchimento: 0; } corpo {font: 12px/20px 'Microsoft yahei', 'arial'; Break Word: Break-All; Word-wrap: Break-Word; } .clearfix: após {content: '.'; exibição: bloco; claro: ambos; altura: 0; Visibilidade: escondida; } .clearfix {display: inline-block; } * html .clearfix {altura: 1%; } .clearfix {display: block; } #wrap {width: 320px; margem: 2em automático; } .card_list {altura: 30px; fundo de borda: 1px Solid #F00; Posição: relativa; } .card_list li {float: esquerda; Largura: 68px; Alinhamento de texto: centro; Altura: 30px; altura de linha: 30px; margem: 0 5px; exibição: embutido; Radio de borda-top-esquerda: 6px; Radio de borda-top-right: 6px; } .card_list li.current {altura: 34px; altura de linha: 34px; margin -top: -4px; borda: 1px sólido #f00; Antecedentes: #ff9494; Bottom de fronteira: Nenhum; Cor: #FFF; } #oli li: nth-filho (1) {background: #ff9494; } #oli li: nth-filho (2) {background: #8cfe8c; } #oli li: nth-filho (3) {background: #6969fb; } #oli li: nth-filho (4) {background: #ffe26f; } .card_content div {display: Nenhum; Altura: 100px; Alinhamento de texto: centro; Cor: #000; } .card_content div: primeiro filho {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 al = document.getElementById ("OU"). 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 = "nenhum"; } this.className = "Current"; this.style.border = "1px sólido" + colorarr [this.index]; this.style.borderbottom = "nenhum"; ol.style.borderbottom = "1px sólido" + colorarr [this.index]; for (var j = 0; j <oml.Length; j ++) {Oul [j] .style.display = "nenhum"; OU [this.index] .style.display = "bloco"; OU [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> <div id="oUl"> <div style="display:block;"> 111111111111111111 </div> <div> 222222222222222 </div> <div> 33333333333333333 </div> <div> 444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 </div>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.