Блог

У меня есть две кнопки на странице. Я оформил вторую кнопку с помощью 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 должен быть активирован только при нажатии другой кнопки (я не перечислил код для этой кнопки здесь). Кроме того, я был бы признателен за любой совет, если есть способ оформить кнопку аналогичным образом с меньшим количеством кода.
Если идея, стоящая за этим, или мой вопрос недостаточно ясны, пожалуйста, спросите 🙂

Спасибо за ваше время и помощь!

вы можете добиться этого в js, прослушивая события нажатия на первой кнопке и добавляя класс ‘glow’ ко 2-й кнопке, вот так:

 //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");

надеюсь, это поможет 🙂