单击时如何使按钮更改颜色（html，CSS，JavaScript）答案

【问题标题】：How to make buttons change colors when clicked on (html, CSS, JavaScript)单击时如何使按钮更改颜色（html，CSS，JavaScript）
【发布时间】：2021-04-23 22:55:51
【问题描述】：

我设置了 3 个按钮，我想知道如何让它们在单击时改变颜色。 “是”应该是绿色的 “否”应该是红色的 “也许”也应该是红色的。

<!DOCTYPE html>

<html lang="en">
<head>
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
    rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>Trivia!</title>

  <script></script>

</head>
<body>

<div class="jumbotron">
  <h1>Trivia!</h1>
</div>

<div class="container">

  <div class="section">
    <h2>Part 1: Multiple Choice</h2>
    <hr>

    <h3>Do you love me?
      <h3>

        <button id="q1button">Yes</button>
        <button id="q2button">No</button>
        <button id="q3button">Maybe</button>

  </div>

</div>
</body>
</html>

【问题讨论】：

这是 Java 还是 Javascript？它们是两种完全不同的语言。
我的意思是Javascript
仅供参考，您的<h3> 标签未关闭。

标签： javascript html css button colors

【解决方案1】：

您可以使用 javascript 来实现。我认为这样的东西适合你。

<!DOCTYPE html>
<html>

<body>

    <div class="jumbotron">
        <h1>Trivia!</h1>
    </div>

    <div class="container">

        <div class="section">
            <h2>Part 1: Multiple Choice</h2>
            <hr>

            <h3>Do you love me?<h3>
                
            <button id="q1button" onclick="this.style.background = 'green'">Yes</button>
            <button id="q2button" onclick="this.style.background = 'red'">No</button>
            <button id="q3button" onclick="this.style.background = 'red'">Maybe</button>

        </div>

    </div>
</body>
</html>

编辑：

解决所有这些问题。

<!DOCTYPE html>
<html>

<body>
    <div class="jumbotron">
        <h1>Trivia!</h1>
    </div>
    <div class="container">
        <div class="section">
            <h2>Part 1: Multiple Choice</h2>
            <hr>
            <h3>Do you love me?<h3>
            <button id="q1button" onclick="changeBg(this);">Yes</button>
            <button id="q2button" onclick="changeBg(this);">No</button>
            <button id="q3button" onclick="changeBg(this);">Maybe</button>
        </div>
    </div>
    <script>
        function changeBg(button){
            if(button.id == "q1button"){
                button.style.background = "green";
                document.getElementById("q2button").style.background = "transparent";
                document.getElementById("q3button").style.background = "transparent";
            }
            else if(button.id == "q2button"){
                button.style.background = "red";
                document.getElementById("q1button").style.background = "transparent";
                document.getElementById("q3button").style.background = "transparent";
            }
            if(button.id == "q3button"){
                button.style.background = "red";
                document.getElementById("q1button").style.background = "transparent";
                document.getElementById("q2button").style.background = "transparent";
            }
        }
    </script>
</body>
</html>

【讨论】：

这里的问题是，如果您点击多个，它们都会被突出显示。
如何避免所有这些都被突出显示？

【解决方案2】：

试试这个：

<style>
 .yes:focus {
  background-color: green;
 }
.no:focus {
 background-color: red;
}
.maybe:focus {
 background-color: yellow;
}
</style>
<button class="yes">Yes</button>
<button class="no">No</button>
<button class="maybe">Maybe</button>

让我知道它是否有效。

【讨论】：

使用焦点的问题，是他们点击了其他的焦点，颜色消失了。
@bobsfriend 真

【解决方案3】：

你是这个意思吗？

button:focus {
    outline: none;
    border: 1px solid black;
}
#q1button:focus {
    background-color: green;
    color: pink;
}
#q2button:focus {
    background-color: red;
    color: white;
}
#q3button:focus {
    background-color: yellow;
    color: black;
}

    <body>

        <div class="jumbotron">
            <h1>Trivia!</h1>
        </div>

        <div class="container">

            <div class="section">
                <h2>Part 1: Multiple Choice</h2>
                <hr>

                <h3>Do you love me?<h3>
                    
                <button id="q1button">Yes</button>
                <button id="q2button">No</button>
                <button id="q3button">Maybe</button>

            </div>

        </div>
    </body>

【讨论】：

请注意，OP 希望不同按钮的颜色不同
根据 OP 可能应该是红色的
使用焦点的问题在于，他们点击了其他东西，焦点和颜色消失了。
好的，我明白了。

【解决方案4】：

您可以只使用 CSS 和对 HTML 进行一些更改来实现此目的。

在示例中，我使用按钮形状的标签来触发输入，这些输入将控制按钮的视觉美感。这是在 CSS 中处理的，使用 :checked 和相邻的 + 选择器来修改 label .button 的颜色。

.inputController {
  display: none;
}
.inputController:checked + .button-greenCK {
  background-color: green;
}
.inputController:checked + .button-redCK {
  background-color: red;
} 

.button {
  font-size: 0.65em;
  background-color: white;
  border-radius: 5px;
  padding: 5px 10px;
  border: 1px solid lightgrey;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
  cursor: pointer;
  margin-right: 5px;
}
.button_label {}

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>

        <script>

        </script>

    </head>
    <body>

        <div class="jumbotron">
            <h1>Trivia!</h1>
        </div>

        <div class="container">

            <div class="section">
                <h2>Part 1: Single Choice</h2>
                <hr>

                <h3>Do you love me?<h3>
                
                <input id="q1button" name="trivia1" class="inputController" type="radio"/>
                <label class="button button-greenCK" for="q1button">
                  <span class="button_value">Yes</span>
                </label>
                
                <input id="q2button" name="trivia1" class="inputController" type="radio"/>
                <label class="button button-redCK" for="q2button">
                  <span class="button_value">No</span>
                </label>
                
                <input id="q3button" name="trivia1" class="inputController" type="radio"/>
                <label class="button button-redCK" for="q3button">
                  <span class="button_label">Maybe</span>
                </label>

            </div>

        </div>
        
        <div class="container">

            <div class="section">
                <h2>Part 2: Multiple Choice</h2>
                <hr>

                <h3>Do you love me?<h3>
                
                <input id="q4button" name="trivia2" class="inputController" type="checkbox"/>
                <label class="button button-greenCK" for="q4button">
                  <span class="button_value">Yes</span>
                </label>
                
                <input id="q5button" name="trivia2" class="inputController" type="checkbox"/>
                <label class="button button-redCK" for="q5button">
                  <span class="button_value">No</span>
                </label>
                
                <input id="q6button" name="trivia2" class="inputController" type="checkbox"/>
                <label class="button button-redCK" for="q6button">
                  <span class="button_label">Maybe</span>
                </label>

            </div>

        </div>
    </body>
</html>

【讨论】：

除了显着的标记更改之外，这种方法的另一个问题是您需要一个重置按钮或一个 javascript sn-p 以防您只想取消选择一个选项

【解决方案5】：

您可以使用 jQuery 添加存储在数据属性中的类名。这使您可以轻松地直接在 HTML 标记中决定按钮的颜色。

请注意，删除颜色类会使按钮恢复原样。

$(".answer").on("click", function(){
  
  // Reset other answers.
  $(".answer").removeClass("red green")

  // Use the classname stored in the button's data attribute
  $(this).addClass($(this).data("color"))
})

.green{
  background: green;
}
.red{
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">


<div class="jumbotron">
  <h1>Trivia!</h1>
</div>

<div class="container">

  <div class="section">
    <h2>Part 1: Multiple Choice</h2>
    <hr>

    <h3>Do you love me?</h3>

        <button class="answer" id="q1button" data-color="green">Yes</button>
        <button class="answer" id="q2button" data-color="red">No</button>
        <button class="answer" id="q3button" data-color="red">Maybe</button>

  </div>

</div>

在普通JS中也是这样：

let btns = document.querySelectorAll(".answer")

btns.forEach(function(btn){

  btn.addEventListener("click", function(){
  
    // Reset other answers.
    btns.forEach(function(btn){
      btn.classList.remove("red")
      btn.classList.remove("green")
    })
    
    // Use the classname stored in the button's data attribute
    this.classList.add(this.getAttribute("data-color"))
  })
})

.green{
  background: green;
}
.red{
  background: red;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">


<div class="jumbotron">
  <h1>Trivia!</h1>
</div>

<div class="container">

  <div class="section">
    <h2>Part 1: Multiple Choice</h2>
    <hr>

    <h3>Do you love me?</h3>

        <button class="answer" id="q1button" data-color="green">Yes</button>
        <button class="answer" id="q2button" data-color="red">No</button>
        <button class="answer" id="q3button" data-color="red">Maybe</button>

  </div>

</div>

【讨论】：

【解决方案6】：

如果你需要在按钮没有获得焦点的情况下保持颜色，你需要使用 JS 来保持按钮状态。您可以在公共父级上添加 click 事件侦听器，如果该事件的目标是按钮，只需在其上切换 active 类。

单击按钮时，取消选择 same 部分中的先前选择（如果有）可能是合理的，但如果允许同时选择，则删除内部 if 块。

document.body.addEventListener('click', (ev) => {

  let currentTgt       = ev.target;
  let previousSelected, 
      section;
  
  /* a button is clicked? */
  if (currentTgt.matches('button')) {

    /* comment the next 'if' block if multiple buttons 
     * selection is allowed at the same time. 
     *
     * Is a button already active and that button is not
     * the same button I've just clicked? Then remove the
     * active class from that button
     */
    section = currentTgt.closest('.section');
    previousSelected = section.querySelector('.active');
    if (previousSelected && currentTgt !== previousSelected) {
       previousSelected.classList.remove('active');
    }

    currentTgt.classList.toggle('active');
  }
})

.q1button.active { color: green }

.q2button.active,
.q3button.active { color: red }

<div class="section">
  <h2>Question #1</h2>
  <button class="q1button">Yes</button>
  <button class="q2button">No</button>
  <button class="q3button">Maybe</button>
</div>

<div class="section">
  <h2>Question #2</h2>
  <button class="q1button">Yes</button>
  <button class="q2button">No</button>
  <button class="q3button">Maybe</button>
</div>

作为旁注，如果您计划有多个部分包含多个问题（和按钮），我建议使用类而不是 id 作为按钮

【讨论】：

【解决方案7】：

您可以使用 javascript 事件侦听器，并在单击它时更改颜色。

当按下其他按钮时，您还必须取消设置其他按钮。

const btn1= $('#q1button');
const btn2= $('#q2button');
const btn3= $('#q3button');

btn1.click( function() {
    btn1.css('background', 'green');
    btn2.css('background', 'initial');
    btn3.css('background', 'initial');
});

btn2.click( function() {
    btn1.css('background', 'initial');
    btn2.css('background', 'red');
    btn3.css('background', 'initial');
});

btn3.click( function() {
    btn1.css('background', 'initial');
    btn2.css('background', 'initial');
    btn3.css('background', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

    <div class="jumbotron">
        <h1>Trivia!</h1>
    </div>

    <div class="container">

        <div class="section">
            <h2>Part 1: Multiple Choice</h2>
            <hr>

            <h3>Do you love me?<h3>
                
            <button id="q1button">Yes</button>
            <button id="q2button">No</button>
            <button id="q3button">Maybe</button>

        </div>

    </div>
</body>

【讨论】：