html css js 按钮 onclick 删除和添加 class

Question

我知道有很多类似的问题，但 none 对我有帮助，所以我来了。我有一个 9 按钮网格，如果我单击其中一个，它会改变颜色（橙色），但如果我单击另一个按钮，它们都会保持橙色。我不想要它。我希望如果一个按钮已经是橙色，则新按钮会变色，但第一个 return 变为正常颜色。我尝试了很多方法，但我不太擅长 js 和 HTML 所以我不明白问题出在哪里

function hide() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demo2")
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

function hide2() {
  var x = document.getElementById("demo2");
  var y = document.getElementById("demo");
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

document.getElementById('sel').onclick = function() {

  var className = ' ' + sel.className + ' ';
  var a = document.getElementById('sel2');
  var b = document.getElementById('sel2');
  var c = document.getElementById('sel3');
  var d = document.getElementById('sel4');
  var e = document.getElementById('sel5');
  var f = document.getElementById('sel6');
  var g = document.getElementById('sel7');
  var h = document.getElementById('sel8');
  var i = document.getElementById('sel9');

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
    this.a = a.replace(' btn2 ', 'btn ')
    this.b = b.replace(' btn2 ', 'btn ')
    this.c = c.replace(' btn2 ', 'btn ')
    this.d = d.replace(' btn2 ', 'btn ')
    this.e = e.replace(' btn2 ', 'btn ')
    this.f = f.replace(' btn2 ', 'btn ')
    this.g = g.replace(' btn2 ', 'btn ')
    this.h = h.replace(' btn2 ', 'btn ')
    this.i = i.replace(' btn2 ', 'btn ')

  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}

document.getElementById('sel2').onclick = function() {

  var className = ' ' + sel2.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel3').onclick = function() {

  var className = ' ' + sel3.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel4').onclick = function() {

  var className = ' ' + sel4.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel5').onclick = function() {

  var className = ' ' + sel5.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel6').onclick = function() {

  var className = ' ' + sel6.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel7').onclick = function() {

  var className = ' ' + sel7.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel8').onclick = function() {

  var className = ' ' + sel8.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel9').onclick = function() {

  var className = ' ' + sel9.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: white;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}

.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="Normalize.css">
  <link rel="stylesheet" href="Style.css">
  <title>Document</title>
</head>


<body>


  <div class="container justify flex-row">
    <div class="flex-col">
      <div class="justify flex-row">
        <h1 class="intro">Vuoi conoscere quali potrebbero <br> essere i <strong>costi</strong> della attività di <span class="orange">logistica</span> e <br>
          <span class="orange">trasporto</span> se affidassi i tuoi prodotti a <br> Gruppo Sinergia?</h1>
      </div>
      <div class="justify flex-row">
        <h2 class="orange">Calcola il tuo preventivo!</h2>
      </div>
      <div class="justify flex-row">
        <h3 class="tariffe"> <span class="bold tartitle">Tariffa di Gestione</span>: comprende le tutte le attività di gestione del prodotto, le attività di gestione<br> dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.</h3>
      </div>
      <div class="justify flex-row">
        <h3 class="tariffe"><span class="bold tartitle">Tariffa di Stoccaggio</span>: rappresenta il valore del singolo prodotto per la conservazione presso la<br> struttura di Gruppo Sinergia.</h3>
      </div>
      <!--^tariffe^-->
      <div class="justify flex-row">
        <p class="tabtitle">TIPOLOGIA PRODOTTO</p>
      </div>


      <!--Parte di codice con button-->
      <div class="justify evenly flex-row">
        <div class="flex-col">
          <div class="flex-row">
            <button id="sel" class="btn bottoneCategoria">Abbigliamento e Scarpe</button>
          </div>
          <div class="flex-row">
            <button id="sel2" class="btn bottoneCategoria">Pet & Food</button>
          </div>
          <div class="flex-row">
            <button id="sel3" class="btn bottoneCategoria">Sport e Tempo libero</button>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <button id="sel4" class="btn bottoneCategoria">Elettronica e Informatica</button>
          </div>
          <div class="flex-row">
            <button id="sel5" class="btn bottoneCategoria">Casa e Cucina</button>
          </div>
          <div class="flex-row">
            <button id="sel6" class="btn bottoneCategoria">Auto e Moto</button>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <button id="sel7" class="btn bottoneCategoria">Food & Beverage</button>
          </div>
          <div class="flex-row">
            <button id="sel8" class="btn bottoneCategoria">Belleza e Salute</button>
          </div>
          <div class="flex-row">
            <button id="sel9" class="btn bottoneCategoria">Altro</button>
          </div>
        </div>
      </div>


      <div class="justify flex-row">
        <p class="tabtitle">DIMENSIONI PRODOTTO</p>
      </div>


      <div class="flex-row justify evenly">
        <div class="flex-col">
          <div class="flex-row">
            <button class="unbtn" onclick="hide()">Standard</button>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <button class="unbtn" onclick="hide2()">Fuori misura</button>
          </div>
        </div>
      </div>


      <div id="demo2" class="justify m-30 evenly bg flex-row hide">
        <div class="flex-col">
          <div class="flex-row">
            <p>Inserisci le dimensioni per il singolo prodotto (cm)</p>
          </div>
          <div class="flex-row justify evenly">
            <input class="small info2" type="text" placeholder="lunghezza">
            <input class="small info2" type="text" placeholder="larghezza">
            <input class="small info2" type="text" placeholder="altezza">
          </div>
        </div>
      </div>


      <div id="demo" class="justify m-30 evenly flex-row bg hide">
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
          </div>
        </div>
      </div>


      <div class="flex-row bg m-7 justify evenly">
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
          </div>
        </div>
      </div>


      <div class="justify evenly flex-row">
        <div class="flex-col">
          <p>TARIFFA DI GESTIONE</p>
        </div>
        <div class="flex-col">
          <p>TARIFFA DI STOCCAGGIO</p>
        </div>
      </div>

      <div class="tabcosti justify flex-row">
        <div class="flex-col">
          <p>€ <span class="white">4,56</span></p>
        </div>
        <div class="flex-col">
          <p class="m-left-50">€ <span class="white">0,16</span> <span class="x-small">al mese</span></p>
        </div>
      </div>

      <div class="flex-row tabcosti2">
        <div class="flex-col align">
          <div class="flex-row">
            <p>€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
          </div>
          <div class="flex-row">
            <p>€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
          </div>
          <div class="flex-row">
            <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
          </div>
        </div>
        <div class="flex-col spacer"></div>
      </div>


      <div class="flex-row justify intro">
        <p class="tariffe">
          I valori sono calcolati con una media non superiore ai 10 ordini al giorni.<br> Per progetti con movimentazioni maggiori sono previste tariffe migliorative.<br> Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia<br>          di prodotti, contattaci!
        </p>
      </div>


      <div class="justify flex-row bg">
        <div class="flex-col">
          <div class="flex-row">
            <p>Nome e Cognome</p>
          </div>
          <div class="flex-row">
            <p>E-mail</p>
          </div>
          <div class="flex-row">
            <p>Telefono</p>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <input class="small info m-14" type="text">
          </div>
          <div class="flex-row">
            <input class="small info m-14" type="text">
          </div>
          <div class="flex-row">
            <input class="small info m-14" type="text">
          </div>
        </div>
      </div>


      <div class="flex-row m-7 justify">
        <button class="richiedi">
                    Richiedi un preventivo
                </button>
      </div>

    </div>
  </div>

</body>

</html>

只是想让大家知道，我试图在 js 中解决这个问题的功能就在第一个按钮 (ID sel) 上，我已经尝试告诉代码替换彩色 class 与无色的。我也知道它看起来很奇怪，因为我使用了 2 种不同的方法来创建变量，但我发现我在堆栈溢出时使用的所有其他函数都是这样写的（我只是更改了 ID 名称）但我不知道是否然后我如何添加其他变量存在差异。

Answer 1

您可以使用以下步骤轻松实现此目的

首先，删除 javascript 中关于 click 侦听器的所有代码。

然后，使用这个存储按钮列表

var buttons = document.querySelectorAll('.bottoneCategoria');

然后，添加这个功能。基本上，只要单击其中一个按钮，就会调用此函数。

function onButtonClick(event) {
    // Get the button on which user clicked using event.target
    let clickedButton = event.target;

    // Loop over all your buttons and replace the btn2 with btn
    // This means all buttons will now be normal
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].classList.replace('btn2', 'btn');
    }

    // Finally change your clicked button from btn to btn2
    // This will make your clicked button to orange while rest will be normall
    clickedButton.classList.replace('btn', 'btn2');
}

最后，遍历所有按钮并将您在上一步中创建的功能附加到所有按钮。

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', onButtonClick);
}

查看工作代码片段以获取更多详细信息。

function hide() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demo2")
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

function hide2() {
  var x = document.getElementById("demo2");
  var y = document.getElementById("demo");
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

var buttons = document.querySelectorAll('.bottoneCategoria');

function onButtonClick(event) {
  let clickedButton = event.target;
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].classList.replace('btn2', 'btn');
  }
  clickedButton.classList.replace('btn', 'btn2');
}

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', onButtonClick);
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: white;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}

.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="Normalize.css">
  <link rel="stylesheet" href="Style.css">
  <title>Document</title>
</head>


<body>


  <div class="container justify flex-row">
    <div class="flex-col">
      <div class="justify flex-row">
        <h1 class="intro">Vuoi conoscere quali potrebbero <br> essere i <strong>costi</strong> della attività di <span class="orange">logistica</span> e <br>
          <span class="orange">trasporto</span> se affidassi i tuoi prodotti a <br> Gruppo Sinergia?</h1>
      </div>
      <div class="justify flex-row">
        <h2 class="orange">Calcola il tuo preventivo!</h2>
      </div>
      <div class="justify flex-row">
        <h3 class="tariffe"> <span class="bold tartitle">Tariffa di Gestione</span>: comprende le tutte le attività di gestione del prodotto, le attività di gestione<br> dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.</h3>
      </div>
      <div class="justify flex-row">
        <h3 class="tariffe"><span class="bold tartitle">Tariffa di Stoccaggio</span>: rappresenta il valore del singolo prodotto per la conservazione presso la<br> struttura di Gruppo Sinergia.</h3>
      </div>
      <!--^tariffe^-->
      <div class="justify flex-row">
        <p class="tabtitle">TIPOLOGIA PRODOTTO</p>
      </div>


      <!--Parte di codice con button-->
      <div class="justify evenly flex-row">
        <div class="flex-col">
          <div class="flex-row">
            <button id="sel" class="btn bottoneCategoria">Abbigliamento e Scarpe</button>
          </div>
          <div class="flex-row">
            <button id="sel2" class="btn bottoneCategoria">Pet & Food</button>
          </div>
          <div class="flex-row">
            <button id="sel3" class="btn bottoneCategoria">Sport e Tempo libero</button>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <button id="sel4" class="btn bottoneCategoria">Elettronica e Informatica</button>
          </div>
          <div class="flex-row">
            <button id="sel5" class="btn bottoneCategoria">Casa e Cucina</button>
          </div>
          <div class="flex-row">
            <button id="sel6" class="btn bottoneCategoria">Auto e Moto</button>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <button id="sel7" class="btn bottoneCategoria">Food & Beverage</button>
          </div>
          <div class="flex-row">
            <button id="sel8" class="btn bottoneCategoria">Belleza e Salute</button>
          </div>
          <div class="flex-row">
            <button id="sel9" class="btn bottoneCategoria">Altro</button>
          </div>
        </div>
      </div>


      <div class="justify flex-row">
        <p class="tabtitle">DIMENSIONI PRODOTTO</p>
      </div>


      <div class="flex-row justify evenly">
        <div class="flex-col">
          <div class="flex-row">
            <button class="unbtn" onclick="hide()">Standard</button>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <button class="unbtn" onclick="hide2()">Fuori misura</button>
          </div>
        </div>
      </div>


      <div id="demo2" class="justify m-30 evenly bg flex-row hide">
        <div class="flex-col">
          <div class="flex-row">
            <p>Inserisci le dimensioni per il singolo prodotto (cm)</p>
          </div>
          <div class="flex-row justify evenly">
            <input class="small info2" type="text" placeholder="lunghezza">
            <input class="small info2" type="text" placeholder="larghezza">
            <input class="small info2" type="text" placeholder="altezza">
          </div>
        </div>
      </div>


      <div id="demo" class="justify m-30 evenly flex-row bg hide">
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
          </div>
        </div>
      </div>


      <div class="flex-row bg m-7 justify evenly">
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
          </div>
          <div class="align flex-row">
            <input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
          </div>
        </div>
        <div class="flex-col">
          <div class="align flex-row">
            <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
          </div>
        </div>
      </div>


      <div class="justify evenly flex-row">
        <div class="flex-col">
          <p>TARIFFA DI GESTIONE</p>
        </div>
        <div class="flex-col">
          <p>TARIFFA DI STOCCAGGIO</p>
        </div>
      </div>

      <div class="tabcosti justify flex-row">
        <div class="flex-col">
          <p>€ <span class="white">4,56</span></p>
        </div>
        <div class="flex-col">
          <p class="m-left-50">€ <span class="white">0,16</span> <span class="x-small">al mese</span></p>
        </div>
      </div>

      <div class="flex-row tabcosti2">
        <div class="flex-col align">
          <div class="flex-row">
            <p>€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
          </div>
          <div class="flex-row">
            <p>€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
          </div>
          <div class="flex-row">
            <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
          </div>
        </div>
        <div class="flex-col spacer"></div>
      </div>


      <div class="flex-row justify intro">
        <p class="tariffe">
          I valori sono calcolati con una media non superiore ai 10 ordini al giorni.<br> Per progetti con movimentazioni maggiori sono previste tariffe migliorative.<br> Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia<br>          di prodotti, contattaci!
        </p>
      </div>


      <div class="justify flex-row bg">
        <div class="flex-col">
          <div class="flex-row">
            <p>Nome e Cognome</p>
          </div>
          <div class="flex-row">
            <p>E-mail</p>
          </div>
          <div class="flex-row">
            <p>Telefono</p>
          </div>
        </div>
        <div class="flex-col">
          <div class="flex-row">
            <input class="small info m-14" type="text">
          </div>
          <div class="flex-row">
            <input class="small info m-14" type="text">
          </div>
          <div class="flex-row">
            <input class="small info m-14" type="text">
          </div>
        </div>
      </div>


      <div class="flex-row m-7 justify">
        <button class="richiedi">
                    Richiedi un preventivo
                </button>
      </div>

    </div>
  </div>


  <script>
  </script>


</body>

</html>

html css js 按钮 onclick 删除和添加 class

html css js button onclick removing and adding class

html

javascript

css

button