javascript - 如何在单击另一个按钮时突出显示一个按钮

Question

我在一个页面上有两个按钮。我用 CSS 设置了第二个按钮的样式，使其呈现浅灰色。现在我想添加一些事件(我猜是用 JS 吗？)，它只在单击第一个按钮后突出显示第二个按钮。

    <button class="tempo1" type="button" onclick="buttonShow()">Datenschutzerklärung</button> 

<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">

TEXT
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>

<!-- Der JavaScript-Code -->

<style>

.tempo1 {
  background-color: #A4A4A4;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

.tempo1:focus {outline:0;}

@-webkit-keyframes glowing {
  0% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; -webkit-box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
}

@-moz-keyframes glowing {
  0% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; -moz-box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
}

@-o-keyframes glowing {
  0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}

@keyframes glowing {
  0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
  50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
  100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}
}

</style>

基本上我想在顶行的按钮 (class=temp1) 上放置一个条件。如果单击另一个按钮(我没有在此处列出此按钮的代码)，则应激活下面的 CSS 代码。另外，如果有一种方法可以用更少的代码以类似的方式设置按钮的样式，我将不胜感激。如果背后的想法或我的问题不够清楚，请提问:)

感谢您的宝贵时间和帮助!

Answer 1

你可以在 js 中通过监听第一个按钮上的点击事件来实现这一点，并将 'glow' 类添加到第二个按钮，如下所示:

//select btn1, and listen to click events on it
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", addGlow);

//the function addGlow, adds the glow class to btn2
function addGlow() {
  var btn2 = document.getElementById("btn2");
  btn2.classList.add("glow");
}

button{
  width:100px;
  height:50px;
  background-color:grey;
  border-radius:5px;
  border:none;
}

.glow{
  background-color: cyan;
  }

<button id="btn1">button 1</button>
<button id="btn2">button 2</button>

请注意，此代码仅添加了 css 发光类，如果您希望按钮在某个时候“关闭”，则需要删除发光类，可以这样做:btn2.classList.remove("发光");

希望这有帮助:)