Скрипт не работает только в 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');
});
});
|
Alessio18911,
надо переделать строку 1 или 3,6 |
Каким образом?
|
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>
|
Спасибо огромное, всё заработало!! Если можно, ответьте, пожалуйста, на 2 вопроса:
1. Свойство querySelectorAll - не поддерживается в IE? 2. А если переделывать строки 3 и 6 - то делать просто обычные циклы и замыкание? |
Alessio18911,
1. forEach не поддеживается для "массивоподобных", с querySelector норма, slice помогает сделать массив из querySelector 2. использовать тотже forEach но через call , пример по ссылке коллекции-не-массивы |
Теперь всё предельно ясно! Спасибо за оперативность и детальность ответов! :)
|
| Часовой пояс GMT +3, время: 16:58. |