この記事では、参照用のJavaScriptタブタグのさまざまな色の効果を切り替えるための実装コードを共有しています。特定のコンテンツは次のとおりです
特定のコード：
<html> <head> <title>さまざまな色のタグ</title> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <style type = "text/css"> * {マージン：0;パディング：0; } body {font：12px/20px 'microsoft yahei'、 'arial';ワードブレイク：ブレークオール;ワードラップ：ブレークワード; } .clearfix：after {content： '。';表示：ブロック;クリア：両方;高さ：0;可視性：隠された; } .clearfix {display：inline-block; } * html .clearfix {height：1％; } .clearfix {display：block; } #wrap {width：320px;マージン：2EM Auto; } .card_list {height：30px;ボーダーボトム：1PXソリッド＃F00;位置：相対; } .card_list li {float：left;幅：68px;テキストアライグ：センター;高さ：30px; Line-Height：30px;マージン：0 5px;表示：インライン; Border-Top-Left-Radius：6px; Border-Top-Right-Radius：6px; } .card_list li.current {height：34px;ラインハイト：34px;マージントップ：-4px;ボーダー：1PXソリッド＃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： "＃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; 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="display:block;"> 111111111111111111 </div> <div> 222222222222222 </div> <div> 3333333333333333 </div> <div> 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 <上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。