我一直在尝试进行 Chrome 扩展。我有 3 个 div，我需要它们仅在单击按钮时显示(每个 div 响应一个按钮)。我还需要隐藏剩下的 2 个 div(只有一个 div 同时显示)。
这是我目前的代码:
JavaScript(是 Chrome 扩展，因此 JavaScript 必须在单独的文件中):
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#hsp').addEventListener('click', myFunctionHSP);
document.querySelector('#latam').addEventListener('click', myFunctionLATAM);
document.querySelector('#mlb').addEventListener('click', myFunctionMLB);
});
function myFunctionHSP() {
var hsp = document.getElementById("toggleHSP");
var latam = document.getElementById("toggleLATAM");
var mlb = document.getElementById("toggleMLB");
if (hsp.style.display === "none") {
hsp.style.display = "block";
latam.style.display = "none";
mlb.style.display = "none";
}
}
function myFunctionLATAM() {
var hsp = document.getElementById("toggleHSP");
var latam = document.getElementById("toggleLATAM");
var mlb = document.getElementById("toggleMLB");
if (latam.style.display === "none") {
latam.style.display = "block";
hsp.style.display = "none";
mlb.style.display = "none";
}
}
function myFunctionMLB() {
var hsp = document.getElementById("toggleHSP");
var latam = document.getElementById("toggleLATAM");
var mlb = document.getElementById("toggleMLB");
if (mlb.style.display === "none") {
mlb.style.display = "block";
latam.style.display = "none";
hsp.style.display = "none";
}
}#header {
width: 400px;
display: inline-block;
margin: 10px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
}
#toggleHSP {
widht: 400px;
height: 400px;
border-color: red;
display: none;
}
#toggleLATAM {
widht: 400px;
height: 400px;
border-color: red;
display: none;
}
#toggleMLB {
widht: 400px;
height: 400px;
border-color: red;
display: none;
}
.division {
background-color: white;
border-width: 0px;
min-width: 100px;
min-height: 50px;
}
.division:hover {
background-color: blue;
color: white;
}<html>
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="header"> <button class="division" id="hsp" onclick="myFunction()"> HSP </button> <button active class="division" id="latam"> LATAM </button> <button class="division" id="mlb"> MLB </button></div>
<div id="toggleHSP">
TEST HSP
</div>
<div id="toggleLATAM">
TEST LATAM
</div>
<div id="toggleMLB">
TEST MLB
</div>
<div> Test info bar </div>
</body>
</html>如果我能得到任何帮助，我会很高兴。
最佳答案
一些小错误:
1) 您的 #hsp div 正在设置 onclick=myfunction()，它不存在并导致错误。
2) 您的 #cross 按钮有一个 querySelectors 错误，它正在寻找不存在的 #latam
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#hsp').addEventListener('click', myFunctionHSP);
document.querySelector('#cross').addEventListener('click', myFunctionLATAM);
document.querySelector('#mlb').addEventListener('click', myFunctionMLB);
});
function myFunctionHSP() {
var hsp = document.getElementById("toggleHSP");
var latam = document.getElementById("toggleLATAM");
var mlb = document.getElementById("toggleMLB");
if (hsp.style.display !== "block") {
hsp.style.display = "block";
latam.style.display = "none";
mlb.style.display = "none";
}
}
function myFunctionLATAM() {
var hsp = document.getElementById("toggleHSP");
var latam = document.getElementById("toggleLATAM");
var mlb = document.getElementById("toggleMLB");
if (latam.style.display !== "block") {
latam.style.display = "block";
hsp.style.display = "none";
mlb.style.display = "none";
}
}
function myFunctionMLB() {
var hsp = document.getElementById("toggleHSP");
var latam = document.getElementById("toggleLATAM");
var mlb = document.getElementById("toggleMLB");
if (mlb.style.display !== "block") {
mlb.style.display = "block";
latam.style.display = "none";
hsp.style.display = "none";
}
}#header {
width: 400px;
display: inline-block;
margin: 10px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
}
#toggleHSP {
widht: 400px;
height: 400px;
border-color: red;
display: none;
}
#toggleLATAM {
widht: 400px;
height: 400px;
border-color: red;
display: none;
}
#toggleMLB {
widht: 400px;
height: 400px;
border-color: red;
display: none;
}
.division {
background-color: white;
border-width: 0px;
min-width: 100px;
min-height: 50px;
}
.division:hover {
background-color: blue;
color: white;
}<html>
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="header"> <button class="division" id="hsp"> HSP </button>
<button active class="division" id="cross"> LATAM </button>
<button class="division" id="mlb"> MLB </button></div>
<div id="toggleHSP">
TEST HSP
</div>
<div id="toggleLATAM">
TEST LATAM
</div>
<div id="toggleMLB">
TEST MLB
</div>
<div> Test info bar </div>
</body>
</html>关于javascript - 我有 3 个按钮，每个按钮都有一个 JavaScript 函数，但只有一个按钮在工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51504084/