Показать сообщение отдельно
  #5 (permalink)  
Старый 14.12.2018, 13:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Hovik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
document.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".pages").addEventListener("click", function(event) {
    var target = event.target;
    if (target = target.closest(".page")) {
      var index = [].indexOf.call(document.querySelectorAll(".pages .page"), target), str = 20 - index * 2 + "%";
      document.querySelector(".action span").innerHTML = str;
      if (target.querySelector("img")) {
        alert("heloo world");
      }
    }
  });
});
  </script>
</head>

<body>
<div class="pages">
<div class="page"><img src="#" alt="#">кнопка 1</div>
<div class="page"><span class="page-txt">кнопка 2</span></div>
<div class="page"><span class="page-txt">кнопка 3</span></div>
<div class="page"><span class="page-txt">кнопка 4</span></div>
<div class="page"><span class="page-txt">кнопка 5</span></div>
<div class="page"><span class="page-txt">кнопка 6</span></div>
<div class="page"><span class="page-txt">кнопка 7</span></div>
<div class="page"><span class="page-txt">кнопка 8</span></div>
<div class="page"><span class="page-txt">кнопка 9</span></div>
<div class="page"><span class="page-txt">кнопка 10</span></div>
</div>

<div class="action">
<span></span>
 </div>
</body>
</html>
Ответить с цитированием