单击时取消选择 html 按钮

Question

我想让 9 号按钮 (3x3) 在被点击后颜色发生变化，所以我使用了 .btn:focus class 来设置背景颜色和文本颜色。问题是，如果我点击其他地方（在页面的空白处或下面的无线电类型输入中），这种颜色变化就会消失，但我需要它在那里。只有当我点击同一组 9 的不同按钮时它才会消失，但我不知道该怎么做。

我尝试在 HTML 代码的下半部分使用一个 JS 函数，它应该向我的 9 个按钮添加一个 class 应该给它们着色，但它不起作用。（我刚刚意识到即使这最后一个 JS 函数可以工作，我的问题是如果我点击一个不是已经选择的按钮我会有 2 个不同的按钮颜色。我不知道如何来解决我的问题。）

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;
}

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

.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;
}

.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>

        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 + ' ';

            if ( ~className.indexOf(' btn ') ) {
                this.className = className.replace(' btn ', 'btn2 ');
            } 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 ');
            }              
        }

        
    </script>


</body>

</html>

--------已编辑-------- 我已经解决了第一个问题，现在事实是，如果我单击一个按钮，它会改变颜色，然后单击另一个按钮，我将有 2 个彩色按钮而不是一个。我需要一种方法来告诉代码，如果已经有一个彩色按钮，新按钮会自动将颜色移除到第一个按钮。

Answer 1

一个简单的方法是给每个按钮一个不同的 id 并为每个按钮分配一个 onclick() 事件，该事件修改具有特定 id 的按钮的 css 并取消选择其他按钮。有关点击事件侦听器的更多信息：https://www.w3schools.com/jsref/event_onclick.asp

单击时取消选择 html 按钮

A html button is unselecting on click

html

javascript

css

onfocus

flexbox