Форум

Alessio18911 · #1 (**permalink**) 07.03.2018, 10:29

Привет всем! JS изучаю не так давно. Есть блок из 2-х кнопок, которые меняют цвет при переключении друг на друга. Написал скрипт, он работает в хроме, в Microsoft Edge, но IE 11 (думаю, и в IE 10 тоже) не работает.. Кнопки не переключаются. Подскажите, как исправить и в чём проблема

<div class="button-tabs">
     <button class="button-tabs__btn is-active"><span style="position: relative;">Левый</span></button>
     <button class="button-tabs__btn"><span style="position: relative;">Правый</span></button>
</div>

.button-tabs {
    display: inline-block;
    vertical-align: top;
}

.button-tabs__btn {
    padding: 12px 25px;
    margin: 0 10px 0 0;
    font: inherit;
    line-height: 20px;
    background: none;
    border: 1px solid violet;
    border-radius: 30px;
    transition: border-color 0.25s ease-in-out, background 0.25s ease-in-out, color 0.25s ease-in-out;
    cursor: pointer;
}

.button-tabs__btn:last-child {
    margin: 0;
}

.button-tabs__btn:hover {
    border-color: red;
}

.is-active {
    color: white;
    background: blue;
    border-color: transparent;
}

var buttonTabsBtn = document.querySelectorAll(".button-tabs__btn");

buttonTabsBtn.forEach(function (item, i) {
    item.addEventListener('click', function (e) {
                    
         buttonTabsBtn.forEach(function (item, i) {
                        
              item.classList.remove('is-active');
         });

         item.classList.add('is-active');
    });                
});

рони · #2 (**permalink**) 07.03.2018, 10:49

Alessio18911,
надо переделать строку 1 или 3,6

Alessio18911 · #3 (**permalink**) 07.03.2018, 10:52

Каким образом?

рони · #4 (**permalink**) 07.03.2018, 10:53

Alessio18911,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .button-tabs {
    display: inline-block;
    vertical-align: top;
}

.button-tabs__btn {
    padding: 12px 25px;
    margin: 0 10px 0 0;
    font: inherit;
    line-height: 20px;
    background: none;
    border: 1px solid violet;
    border-radius: 30px;
    transition: border-color 0.25s ease-in-out, background 0.25s ease-in-out, color 0.25s ease-in-out;
    cursor: pointer;
}

.button-tabs__btn:last-child {
    margin: 0;
}

.button-tabs__btn:hover {
    border-color: red;
}

.is-active {
    color: white;
    background: blue;
    border-color: transparent;
}

.button-tabs__btn:focus{
  outline:  none
}

  </style>


</head>

<body>
<div class="button-tabs">
  <button class="button-tabs__btn is-active"><span style="position: relative;">Левый</span></button>
  <button class="button-tabs__btn"><span style="position: relative;">Правый</span></button>
</div>
<script>

var buttonTabsBtn = [].slice.call(document.querySelectorAll(".button-tabs__btn"),0);

buttonTabsBtn.forEach(function (item, i) {
    item.addEventListener('click', function (e) {

         buttonTabsBtn.forEach(function (item, i) {

              item.classList.remove('is-active');
         });

         item.classList.add('is-active');
    });
});

  </script>
</body>
</html>

Alessio18911 · #5 (**permalink**) 07.03.2018, 10:59

Спасибо огромное, всё заработало!! Если можно, ответьте, пожалуйста, на 2 вопроса:
1. Свойство querySelectorAll - не поддерживается в IE?
2. А если переделывать строки 3 и 6 - то делать просто обычные циклы и замыкание?

рони · #6 (**permalink**) 07.03.2018, 11:15

Alessio18911,
1. forEach не поддеживается для "массивоподобных", с querySelector норма, slice помогает сделать массив из querySelector
2. использовать тотже forEach но через call , пример по ссылке коллекции-не-массивы

Alessio18911 · #7 (**permalink**) 07.03.2018, 12:56

Теперь всё предельно ясно! Спасибо за оперативность и детальность ответов!

Форум

Справочник

Discord чат

Курсы javascript