0

Есть две кнопки, атрибута href у них может не быть, только навешаны события. Цвет при наведении и нажатии на любую из них должен меняться. Но псевдокласс :active в IE7 не работает для таких случаев, поэтому написан скрипт, который добавляет класс при нажатии кнопки и убирает его при отжатии. Проблема в том, что скрипт мой работает только для одной кнопки, а надо для двух. Пробовала делать выборку по классу кнопок, но скрипт перестает работать вообще. Помогите подредактирвоать скрипт, чтобы при клике на кнопку с классом 'btn', этой кнопке добавлялся еще и класс 'active'. Скрипт нужен на чистом JS, в котором я не особо сильна. Вот то что есть на данный момент

window.onload = function() {
  var btn = document.getElementById('continue');
  btn.onmousedown = function() {
    this.className += " active";
  }
  btn.onmouseup = function() {
    this.className = "btn";
  }
}
.btn a {
  cursor: pointer;
  display: block;
  width: 247px;
  height: 44px;
  text-decoration: none;
  text-align: center;
}
.btn a span {
  line-height: 42px;
  font-size: 19px;
  color: #FFFFFF;
}
#continue a {
  background: #6E6E6E;
}
#continue a:hover {
  background: #8D8D8D;
}
#continue.active a,
#continue a:active {
  background: #5E5E5E;
}
#buy {
  margin-top: 20px;
}
#buy a {
  background: #FEC600;
}
#buy a:hover {
  background: #FFDB5A;
}
#buy a:active {
  background: #FEB900;
}
#buy a span {
  color: #101010;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <divclass="right-bottom">
    <div class="btn" id="continue">
      <a onclick="window.external.OnClose();">
        <span>Continue converting</span>
      </a>
    </div>
    <div class="btn" id="buy">
      <a href="" onclick="window.external.OnBuyNow(); return false;">
        <span>Buy activation key</span>
      </a>
    </div>
    </div>
</body>

</html>

1 ответ 1

1

window.onload = function() {
  var btn = document.getElementById('continue');
  btn.onmousedown = function() {
    this.className += " active";
  }
  btn.onmouseup = function() {
    this.className = "btn";
  }

  var btn2 = document.getElementById('buy');
  btn2.onmousedown = function() {
    this.className += " active";
  }
  btn2.onmouseup = function() {
    this.className = "btn";
  }
}
.btn a {
  cursor: pointer;
  display: block;
  width: 247px;
  height: 44px;
  text-decoration: none;
  text-align: center;
}
.btn a span {
  line-height: 42px;
  font-size: 19px;
  color: #FFFFFF;
}
#continue a {
  background: #6E6E6E;
}
#continue a:hover {
  background: #8D8D8D;
}
#continue.active a,
#continue a:active {
  background: #5E5E5E;
}
#buy {
  margin-top: 20px;
}
#buy a {
  background: #FEC600;
}
#buy a:hover {
  background: #FFDB5A;
}
#buy a.active,
#buy a:active {
  background: #FEB900;
}
#buy a span {
  color: #101010;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <divclass="right-bottom">
    <div class="btn" id="continue">
      <a onclick="window.external.OnClose();">
        <span>Continue converting</span>
      </a>
    </div>
    <div class="btn" id="buy">
      <a href="" onclick="window.external.OnBuyNow(); return false;">
        <span>Buy activation key</span>
      </a>
    </div>
    </div>
</body>

</html>

2
  • Две функции - это слишком просто) А в одной на чистом JS никак не сделать?
    – Елена
    12 авг 2016 в 9:45
  • @Елена для IE7 я бы сделал именно так)))
    – Mihanik71
    12 авг 2016 в 9:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.