JS html CSSの変更CSSが理解する必要があります

jssでCSSを変更しようとしましたが、スクリプトはCSSを1回だけ変更した後、動作を停止します。誰かが私を助けることができますか？JS html CSSの変更CSSが理解する必要があります

<html> 
    <script> 
    function cambio_eff(a){ 

     if (a == '1'){ 
     effect01.id = 'effect01'; 
     effect02.id = 'effect01'; 
     effect03.id = 'effect01'; 

     } 
     if (a == '2'){ 
     effect01.id = 'effect02'; 
     effect02.id = 'effect02'; 
     effect03.id = 'effect02'; 
     } 
     if (a == '3'){ 
     effect01.id = 'effect03'; 
     effect02.id = 'effect03'; 
     effect03.id = 'effect03'; 
     } 
    } 

    </script> 
    </head> 

    <body> 
    ... 
<div id="effect01"> 
    <button id="efi01" onClick="cambio_eff('1');" >AndV1x1b(default)</button><br><br> 
    <button id="efi02" onClick="cambio_eff('2');">And2x2ch</button> 
    <button id="efi03" onClick="cambio_eff('3');">And2x2ch</button> 
</div> 
    ... 

    </body> 

    </html>

これ以上はコードです。ありがとうございます。

出典

2016-07-21 Superbau Bauxar

'effect01'？ –

私は置くのを忘れて、effect01は私が変更したいものです、私はコードを編集します。 –

id is intended to be a globally unique attributeを変更したり、複数の要素に割り当てることはできません。このようにクラス属性を使用してみてください：

<html> 
<head> 
</head> 
<body> 
    <ul> 
     <li><button id="efi01">AndV1x1b(default)</button></li> 
     <li><button id="efi02">And2x2ch</button></li> 
     <li><button id="efi03">And2x2ch</button></li> 
    </ul> 

    <div id="box01" class="effect01"> 
     <h2>Box 1</h2> 
    </div> 

    <div id="box02" class="effect01"> 
     <h2>Box 2</h2> 
    </div> 

    <div id="box03" class="effect01"> 
     <h2>Box 3</h2> 
    </div> 

    <script> 
     function cambio_eff(a, e) { 
      var box01 = document.getElementById("box01"); 
      var box02 = document.getElementById("box02"); 
      var box03 = document.getElementById("box03"); 

      if (a == "1") { 
       box01.className = "effect01"; 
       box02.className = "effect01"; 
       box03.className = "effect01"; 

      } else if (a == "2") { 
       box01.className = "effect02"; 
       box02.className = "effect02"; 
       box03.className = "effect02"; 

      } else if (a == "3") { 
       box01.className = "effect03"; 
       box02.className = "effect03"; 
       box03.className = "effect03"; 

      } 

     } 

     document.getElementById("efi01").onclick = function(e){cambio_eff(1);}; 
     document.getElementById("efi02").onclick = function(e){cambio_eff(2);}; 
     document.getElementById("efi03").onclick = function(e){cambio_eff(3);}; 
    </script> 
</body>

実施例：https://jsfiddle.net/uh2ort0r/3/

これらの変数が定義され、例えば

出典

2016-07-22 17:30:18 MyItchyChin

JS html CSSの変更CSSが理解する必要があります

答えて

関連する問題