В этой статье используется код реализации для переключения эффектов различных цветов тегов вкладок JavaScript для вашей ссылки. Конкретный контент заключается в следующем
Конкретный код:
<html> <head> <Teal> Теги разных цветов </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'; разрыв в словесном: разрыв; Word-wrap: слов-слова; } .clearfix: после {content: '.'; дисплей: блок; ясно: оба; высота: 0; видимость: скрыта; } .clearfix {display: inline-block; } * html .clearfix {height: 1%; } .clearfix {display: block; } #wrap {width: 320px; Маржа: 2em Auto; } .card_list {height: 30px; Пограничный подклад: 1PX SOLID #F00; позиция: относительно; } .card_list li {float: left; Ширина: 68px; Текст-альбом: Центр; Высота: 30px; высота линии: 30px; Полевая: 0 5px; дисплей: inline; пограничная топ-левая радиус: 6px; Прадис-радий с границей: 6px; } .card_list li.current {height: 34px; высота линии: 34px; маржинальная версия: -4px; Граница: 1PX SOLID #F00; Фон: #FF9494; пограничный под кносом: нет; Цвет: #fff; } #oli li: nth-child (1) {founale: #ff9494; } #oli li: nth-child (2) {founale: #8cfe8c; } #oli li: nth-child (3) {founale: #6969fb; } #oli li: nth-child (4) {founale: #ffe26f; } .card_content div {display: none; высота: 100px; Текст-альбом: Центр; Цвет: #000; } .card_content div: First-Child {founale: #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 = "нет"; } this.classname = "current"; this.style.border = "1px solid" + colorarr [this.index]; this.style.borderbottom = "нет"; 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"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </ul> <div id = "oul"> <div style = "Difle: block;"> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </div> <div> 33333333333333333 </div> <div> 444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444.Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.