JS html css change css необходимо понять

Я пытаюсь изменить css на js, но скрипт меняет css только один раз, после, перестает работать. Кто-нибудь может мне помочь?JS html css change 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 change css необходимо понять

ответ

Смежные вопросы