我设置了3个按钮，我想知道如何使它们在点击时改变颜色。"是"应该是绿色的"不"应该是红色的"Maybe"也应该是红色的。
<!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>
你是这个意思吗?
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>你可以使用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>试试这个:
<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>您可以通过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>您可以使用jQuery添加存储在data属性中的类名。这使得您可以很容易地直接在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>如果你需要保持颜色，即使按钮没有聚焦，你需要使用JS来维持按钮状态。你可以添加一个click事件监听器在一个共同的父，如果该事件的目标是一个按钮，只需切换active类在它。
当一个按钮被点击时，在相同的部分中取消先前的选择(如果有的话)是合理的，但如果允许并发选择，则删除内部的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的按钮，如果你计划有多个部分的多个问题(和按钮)
你可以使用一个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>