تشارك هذه المقالة رمز التنفيذ لتبديل تأثيرات ألوان مختلفة من علامات علامات التبويب 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' ؛ الكلمة كسر: كسر الكل ؛ Word-Wrap: كلمة استراحة ؛ } .clearfix: بعد {content: '.' ؛ العرض: كتلة ؛ واضح: كلاهما ؛ الارتفاع: 0 ؛ الرؤية: مخفية ؛ } .clearfix {display: inline block ؛ } * html .clearfix {الارتفاع: 1 ٪ ؛ } .clearfix {display: block ؛ } #wrap {width: 320px ؛ الهامش: 2EM Auto ؛ } .card_list {height: 30px ؛ Border-Bottom: 1px Solid #F00 ؛ الموقف: قريب } .card_list li {float: left ؛ العرض: 68 بكسل ؛ محاذاة النص: المركز ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ الهامش: 0 5px ؛ العرض: مضمّن ؛ الحدود إلى اليسار-راديوس: 6px ؛ راديوس الصرف الحدودي: 6px ؛ } .card_list li.current {height: 34px ؛ خط الارتفاع: 34px ؛ الهامش: -4px ؛ الحدود: 1 بكسل Solid #F00 ؛ الخلفية: #ff9494 ؛ القاع الحدودي: لا شيء ؛ اللون: #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 ؛ الارتفاع: 100px ؛ محاذاة النص: المركز ؛ اللون: #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: var oli = ol.getElementSbyTagname ("li") ؛ var oul = document.getElementById ("oul"). getElementsByTagName ("div") ؛ لـ (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] ؛ لـ (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> </ul> 222222222222222222222222222 <iv style = "display: block ؛" </viv> <viv> 3333333333333333 </viv> <viv> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444 4ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.