Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.03.2018, 09:29
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 86

Скрипт не работает только в IE10, 11.
Привет всем! 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, 09:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,095

Alessio18911,
надо переделать строку 1 или 3,6
Ответить с цитированием
  #3 (permalink)  
Старый 07.03.2018, 09:52
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 86

Каким образом?
Ответить с цитированием
  #4 (permalink)  
Старый 07.03.2018, 09:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,095

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>
Ответить с цитированием
  #5 (permalink)  
Старый 07.03.2018, 09:59
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 86

Спасибо огромное, всё заработало!! Если можно, ответьте, пожалуйста, на 2 вопроса:
1. Свойство querySelectorAll - не поддерживается в IE?
2. А если переделывать строки 3 и 6 - то делать просто обычные циклы и замыкание?
Ответить с цитированием
  #6 (permalink)  
Старый 07.03.2018, 10:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,095

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

Последний раз редактировалось рони, 07.03.2018 в 13:11.
Ответить с цитированием
  #7 (permalink)  
Старый 07.03.2018, 11:56
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 86

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Cкрипт javascript работает только после того, как курсор в адресную строку qwaker Элементы интерфейса 4 25.04.2014 16:04
Скрипт не работает только в Firefox. В остальных браузерах все ОК. Dinamitt Firefox/Mozilla 1 28.06.2013 14:29
Почему скрипт работает только в Опере? evgenij-1963 (X)HTML/CSS 6 23.03.2013 15:14
Скрипт работает только в Mazilla Pashok Ваши сайты и скрипты 3 26.01.2013 21:09
Почему скрипт не работает с данными, которые вернул другой скрипт? Rooner jQuery 3 20.09.2012 13:56