Question

我一直在尝试进行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>

如果能得到帮助，我会很高兴。

Answer 1

一些小错误：

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>

我有3个按钮，每个按钮都具有JavaScript函数，只有其中一个起作用

1 个答案: