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中通过侦听第一个按钮上的click事件并将“ 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 glow类，如果您希望按钮在某个时候“关闭”，则需要删除glow类，可以这样进行： btn2.classList.remove("glow");

希望这会有所帮助：）

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

1 个答案: