Question

所以，这是我的问题。我正在制作一个主页，我正试图这样做，所以当你点击按钮时它会改变按钮的颜色。这就是我所拥有的一切，但他们会在以后做得更多。无论如何，我已经有了div和所有这些，但我无法让我的三个按钮工作。只有第一个有效。看看

CSS

body {
  background: #2F4F4F;
}
#as {
  width: 5px;
  display: inline-block;
}
#Home, #Alt, #News, #Contact {
  background: #5F9EA0;
  border-radius: 30px;
  width: 160px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  display: inline-block;
}
#Home:hover, #Alt:hover, #News:hover, #Contact:hover {
  background: #6495ED;
  cursor: pointer;
}

HTML

  <div id = "as"></div>
  <div id = "Home" onclick = "Chb()">Home</div>
  <div id = "Alt" onclick = "Cvb()">Versions</div>
  <div id = "News" onclick = "Cnb()">News</div>
  <div id = "Contact" onclick = "Ccb()">Contact</div>

JS

function Chb() {
  document.getElementById("Home").style.background = "#A9A9A9";
  document.getElementById("Versions").style.background = "#5F9EA0";
  document.getElementById("News").style.background = "#5F9EA0";
  document.getElementById("Contact").style.background = "#5F9EA09";
}
function Cvb() {
  document.getElementById("Home").style.background = "#5F9EA0";
  document.getElementById("Versions").style.background = "#A9A9A9";
  document.getElementById("News").style.background = "#5F9EA0";
  document.getElementById("Contact").style.background = "#5F9EA09";
}
function Cnb() {
  document.getElementById("Home").style.background = "#5F9EA0";
  document.getElementById("Versions").style.background = "#5F9EA0";
  document.getElementById("News").style.background = "#A9A9A9";
  document.getElementById("Contact").style.background = "#5F9EA09";
}
function Ccb() {
  document.getElementById("Home").style.background = "#5F9EA0";
  document.getElementById("Versions").style.background = "#5F9EA0";
  document.getElementById("News").style.background = "#5F9EA0";
  document.getElementById("Contact").style.background = "#A9A9A9";
}

所以每当我点击主页按钮时，它就会按照我想要它做的，但是当我点击任何其他按钮时，它就不起作用了。我相信这可能是display: inline-block;的一部分，如果是这样，请告诉我如何修复它。

Answer 1

您没有名为id的{{1}}，只有Versions。改变它并且ta da！

Alt

function Chb() {
  document.getElementById("Home").style.background = "#A9A9A9";
  document.getElementById("Alt").style.background = "#5F9EA0";
  document.getElementById("News").style.background = "#5F9EA0";
  document.getElementById("Contact").style.background = "#5F9EA09";
}
function Cvb() {
  document.getElementById("Home").style.background = "#5F9EA0";
  document.getElementById("Alt").style.background = "#A9A9A9";
  document.getElementById("News").style.background = "#5F9EA0";
  document.getElementById("Contact").style.background = "#5F9EA09";
}
function Cnb() {
  document.getElementById("Home").style.background = "#5F9EA0";
  document.getElementById("Alt").style.background = "#5F9EA0";
  document.getElementById("News").style.background = "#A9A9A9";
  document.getElementById("Contact").style.background = "#5F9EA09";
}
function Ccb() {
  document.getElementById("Home").style.background = "#5F9EA0";
  document.getElementById("Alt").style.background = "#5F9EA0";
  document.getElementById("News").style.background = "#5F9EA0";
  document.getElementById("Contact").style.background = "#A9A9A9";
}

body {
  background: #2F4F4F;
}
#as {
  width: 5px;
  display: inline-block;
}
#Home, #Alt, #News, #Contact {
  background: #5F9EA0;
  border-radius: 30px;
  width: 160px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  display: inline-block;
}
#Home:hover, #Alt:hover, #News:hover, #Contact:hover {
  background: #6495ED;
  cursor: pointer;
}

使用一种功能的另一种解决方案。

<div id = "as"></div>
  <div id = "Home" onclick = "Chb()">Home</div>
  <div id = "Alt" onclick = "Cvb()">Versions</div>
  <div id = "News" onclick = "Cnb()">News</div>
  <div id = "Contact" onclick = "Ccb()">Contact</div>

function Cb(e) {
  //For this to work, you can't use the class "js-active" anywhere else.
  active = document.getElementsByClassName("js-active");
  
  if (active.length > 0) {
    active[0].style.background = "";
    active[0].classList.remove("js-active");
  }
  
  e.className += " js-active";
  
  //Instead of the previous line of code, you could also have:
  //#some-id .js-active {
  //  background: #A9A9A9;
  //}
  //To override the initial CSS, just add an id to the CSS selector, maybe the page wrapper's.
  document.getElementsByClassName("js-active")[0].style.background = "#A9A9A9";
}

body {
  background: #2F4F4F;
}

#as {
  width: 5px;
  display: inline-block;
}

#Home,
#Alt,
#News,
#Contact {
  background: #5F9EA0;
  border-radius: 30px;
  width: 160px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  display: inline-block;
}

#Home:hover,
#Alt:hover,
#News:hover,
#Contact:hover {
  background: #6495ED;
  cursor: pointer;
}

Answer 2

首先，您尝试引用id'版本'而不是Alt。将其更改为或保持一致。其次，您可以将this传递给分配给<div>的{{1}}处理程序的回调函数，以减少代码的大小。

Here's a working jsbin

修改后的代码：

HTML：

onclick

使用Javascript：

<div id = "Home" onclick = "newFunction(this)">Home</div>
<div id = "Alt" onclick = "newFunction(this)">Versions</div>
<div id = "News" onclick = "newFunction(this)">News</div>
<div id = "Contact" onclick = "newFunction(this)">Contact</div>

更短的Javascript版本（在jsbin或codepen中不起作用）：

function newFunction(e) {
  // set all divs to one colour
  document.getElementById("Home").style.background = "#5F9EA0";
  document.getElementById("Alt").style.background = "#5F9EA0";
  document.getElementById("News").style.background = "#5F9EA0";
  document.getElementById("Contact").style.background = "#5F9EA09";

  // set the one clicked on to another
  document.getElementById(e.id).style.background = "#A9A9A9";
}

如何在一行中有几个Onclicks（HTML / CSS / JS）

2 个答案: