Переключение иконки таба в зависимости от активности ссылки
Помогите разобраться в коде. При переключении на активный таб должна меняться картинка, а при уходе с него картинка должна стать как была до этого. Пытаюсь это реализовать через js, но что-то идет не так, помогите решить проблему.
const iconItemHotel = document.querySelector(".point__svg");
const crossForIcon = document.querySelector(".popup__icon-cross")
const popupHotel = document.querySelector(".popup")
const tabDomodedovoImg = document.getElementById("domodedovo")
const linkDomodedovo = document.querySelector(".tabs__link-decoration")
function openHotenPopup() {
popupHotel.classList.add("popup_type_display");
}
function closeHotenPopup() {
popupHotel.classList.remove("popup_type_display");
}
}
iconItemHotel.addEventListener("click", openHotenPopup);
crossForIcon.addEventListener("click", closeHotenPopup);
linkDomodedovo.addEventListener("click", function (evt) {
let oTarget = evt.target;
if (oTarget === linkDomodedovo) {
oTarget = "/image/logo_mini_1.png";
console.log(tabDomodedovoImg.src);
} else {
oTarget = "/image/logo_mini_1_1.png";
console.log(123);
}
});
<div class="conteiner">
<div class="tabs">
<nav class="tabs__items">
<div class="tabs__item tabs__domodedovo">
<div class="tabs__image"><img id="domodedovo" class="" src="./image/logo_mini_1.png" alt="Изображение логотипа"></div>
<div class="tabs__link" ><a href="#tabs1" class="tabs__link-decoration">Домодедово</a></div>
</div>
<div class="tabs__item">
<div class="tabs__image"><img id="vnukovo" class="" src="./image/logo_mini_2.png" alt="Изображение логотипа"></div>
<div class="tabs__link"><a href="#tabs2" class="tabs__link-decoration">Внуково</a></div>
</div>
<div class="tabs__item">
<div class="tabs__image"><img class="" src="./image/logo_mini_3_1.png" alt="Изображение логотипа"></div>
<div class="tabs__link"><a href="#tabs3" class="tabs__link-decoration">Жуковский</a></div>
</div>
</nav>
<div class="tabs__body">
<div id="tabs1" class="tabs__block">
<div class="tabs__map">
<iframe src="https://yandex.ru/map-widget/v1/-/CCUmbUqApC" width="100%" height="100%" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe>
<div class="tabs__button-conteiner">
<div class="tabs__button tabs__button_type_active">
<div class="tabs__icon-point">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 36.107 45.229" enable-background="new 0 0 36.107 45.229" xml:space="preserve">
<g>
<path fill="#fc8e05" d="M17.41,0.012C8.418,0.327,0.949,7.338,0.086,16.287c-0.178,1.79-0.074,3.523,0.24,5.184l0,0
c0,0,0.027,0.195,0.121,0.565c0.279,1.243,0.695,2.448,1.215,3.58C3.473,29.9,7.656,37.068,17.047,44.867
c0.576,0.483,1.42,0.483,2.004,0c9.391-7.789,13.576-14.958,15.395-19.261c0.529-1.131,0.938-2.328,1.217-3.579
c0.082-0.362,0.119-0.566,0.119-0.566l0,0c0.215-1.112,0.326-2.253,0.326-3.421C36.107,7.857,27.672-0.35,17.41,0.012z
M18.049,27.016c-4.844,0-8.768-3.922-8.768-8.763s3.924-8.764,8.768-8.764s8.77,3.923,8.77,8.764S22.893,27.016,18.049,27.016z"></path>
</g>
</svg>
</div>
<div class="tabs__link-place">
<a href="#" class="tabs__link tabs__link-type-active">Отель</a>
</div>
<div class="tabs__icon-tick">
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 15.904 11.778" enable-background="new 0 0 15.904 11.778" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#24b185" d="M15.904,2.122l-9.656,9.657h-0.59L0,6.122L2.123,4l3.83,3.83
L13.783,0L15.904,2.122z"></path>
</g>
</svg>
</div>
</div>
<div class="tabs__button">
<div class="tabs__icon-point">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 36.107 45.229" enable-background="new 0 0 36.107 45.229" xml:space="preserve">
<g>
<path fill="#fc8e05" d="M17.41,0.012C8.418,0.327,0.949,7.338,0.086,16.287c-0.178,1.79-0.074,3.523,0.24,5.184l0,0
c0,0,0.027,0.195,0.121,0.565c0.279,1.243,0.695,2.448,1.215,3.58C3.473,29.9,7.656,37.068,17.047,44.867
c0.576,0.483,1.42,0.483,2.004,0c9.391-7.789,13.576-14.958,15.395-19.261c0.529-1.131,0.938-2.328,1.217-3.579
c0.082-0.362,0.119-0.566,0.119-0.566l0,0c0.215-1.112,0.326-2.253,0.326-3.421C36.107,7.857,27.672-0.35,17.41,0.012z
M18.049,27.016c-4.844,0-8.768-3.922-8.768-8.763s3.924-8.764,8.768-8.764s8.77,3.923,8.77,8.764S22.893,27.016,18.049,27.016z"></path>
</g>
</svg>
</div>
<div class="tabs__link-place">
<a href="#" class="tabs__link">Стойки</a>
</div>
<div class="tabs__icon-tick">
</div>
</div>
</div>
<div class="point">
<div class="point__svg">
<svg version="1.1" id="myicon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36.107px" height="45.229px" viewBox="0 0 36.107 45.229" enable-background="new 0 0 36.107 45.229" xml:space="preserve">
<g>
<path fill="#ffbb42" d="M17.41,0.012C8.418,0.327,0.949,7.338,0.086,16.287c-0.178,1.79-0.074,3.523,0.24,5.184l0,0
c0,0,0.027,0.195,0.121,0.565c0.279,1.243,0.695,2.448,1.215,3.58C3.473,29.9,7.656,37.068,17.047,44.867
c0.576,0.483,1.42,0.483,2.004,0c9.391-7.789,13.576-14.958,15.395-19.261c0.529-1.131,0.938-2.328,1.217-3.579
c0.082-0.362,0.119-0.566,0.119-0.566l0,0c0.215-1.112,0.326-2.253,0.326-3.421C36.107,7.857,27.672-0.35,17.41,0.012z
M18.049,27.016c-4.844,0-8.768-3.922-8.768-8.763s3.924-8.764,8.768-8.764s8.77,3.923,8.77,8.764S22.893,27.016,18.049,27.016z"></path>
</g>
</svg>
</div>
<div class="popup">
<div class="popup__window">
<div class="popup__icon-cross">
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
<polygon points="15,7 8,7 8,0 7,0 7,7 0,7 0,8 7,8 7,15 8,15 8,8 15,8 "></polygon>
</svg>
</div>
<h4 class="popup__title">Гостинница Рамада</h4>
<p class="popup__text">Адрес: ул. Ильюшина(Авиационный)1 Б. Домодедово, Московская обл. 142007</p>
<p class="popup__contact">Телефон: 8(495)723-10-03</p>
</div>
</div>
</div>
</div>
</div>
<div id="tabs2" class="tabs__block">
Первая вторая.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non, quos sed ipsam blanditiis officiis harum doloremque quasi, commodi repudiandae itaque provident dolorem doloribus dolores, libero porro inventore quae possimus facilis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus quo ad ut deleniti. Laboriosam ab cumque illo ea totam cupiditate quisquam magni molestias consectetur voluptatum, mollitia voluptate officia qui.
</div>
<div id="tabs3" class="tabs__block">
Первая третья.Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni sequi animi nemo eligendi dolorum ullam facere, veniam aperiam dolore enim, similique sed dicta architecto deserunt saepe doloribus adipisci eum nobis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non, quos sed ipsam blanditiis officiis harum doloremque quasi, commodi repudiandae itaque provident dolorem doloribus dolores, libero porro inventore quae possimus facilis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus quo ad ut deleniti. Laboriosam ab cumque illo ea totam cupiditate quisquam magni molestias consectetur voluptatum, mollitia voluptate officia qui.
</div>
</div>
</div>
</div>
<script src="/js/index.js"></script>
Ответы (2 шт):
Вам нужно что-то вроде этого. Хотя, есть более красивые способы изменения картинки, но вам легче будет понять свой измененный код, чем абсолютно новый.
// Берем все links на странице
const tabLinks = document.querySelectorAll(".tabs__link-decoration");
// Берем только link для домодедово
const linkDomodedovo = document.querySelector("#linkDomodedovo");
// Берем только img для домодедово
const imgDomodedovo = document.querySelector("#domodedovo");
// Навершиваем обработчик события на ВСЕ links
[...tabLinks].forEach(link => {
link.addEventListener("click", function(evt) {
let oTarget = evt.target;
// проверяем, если текущий нажатый линк - домодедово
if (oTarget === linkDomodedovo) {
imgDomodedovo.src = "/image/logo_mini_1.png";
console.log('this is linkDomodedovo');
} else {
imgDomodedovo.src = "/image/logo_mini_1_1.png";
console.log('this is another link');
}
});
});
<div class="conteiner">
<div class="tabs">
<nav class="tabs__items">
<div class="tabs__item tabs__domodedovo">
<div class="tabs__image"><img id="domodedovo" class="" src="./image/logo_mini_1.png" alt="Изображение логотипа"></div>
<div class="tabs__link"><a id="linkDomodedovo" href="#tabs1" class="tabs__link-decoration domodedovo">Домодедово</a></div>
</div>
<div class="tabs__item">
<div class="tabs__image"><img id="vnukovo" class="" src="./image/logo_mini_2.png" alt="Изображение логотипа"></div>
<div class="tabs__link"><a href="#tabs2" class="tabs__link-decoration">Внуково</a></div>
</div>
<div class="tabs__item">
<div class="tabs__image"><img class="" src="./image/logo_mini_3_1.png" alt="Изображение логотипа"></div>
<div class="tabs__link"><a href="#tabs3" class="tabs__link-decoration">Жуковский</a></div>
</div>
</nav>
<div class="tabs__body">
<div id="tabs1" class="tabs__block">
<div class="tabs__map">
<iframe src="https://yandex.ru/map-widget/v1/-/CCUmbUqApC" width="100%" height="100%" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe>
<div class="tabs__button-conteiner">
<div class="tabs__button tabs__button_type_active">
<div class="tabs__icon-point">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 36.107 45.229" enable-background="new 0 0 36.107 45.229" xml:space="preserve">
<g>
<path fill="#fc8e05" d="M17.41,0.012C8.418,0.327,0.949,7.338,0.086,16.287c-0.178,1.79-0.074,3.523,0.24,5.184l0,0
c0,0,0.027,0.195,0.121,0.565c0.279,1.243,0.695,2.448,1.215,3.58C3.473,29.9,7.656,37.068,17.047,44.867
c0.576,0.483,1.42,0.483,2.004,0c9.391-7.789,13.576-14.958,15.395-19.261c0.529-1.131,0.938-2.328,1.217-3.579
c0.082-0.362,0.119-0.566,0.119-0.566l0,0c0.215-1.112,0.326-2.253,0.326-3.421C36.107,7.857,27.672-0.35,17.41,0.012z
M18.049,27.016c-4.844,0-8.768-3.922-8.768-8.763s3.924-8.764,8.768-8.764s8.77,3.923,8.77,8.764S22.893,27.016,18.049,27.016z"></path>
</g>
</svg>
</div>
<div class="tabs__link-place">
<a href="#" class="tabs__link tabs__link-type-active">Отель</a>
</div>
<div class="tabs__icon-tick">
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 15.904 11.778" enable-background="new 0 0 15.904 11.778" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#24b185" d="M15.904,2.122l-9.656,9.657h-0.59L0,6.122L2.123,4l3.83,3.83
L13.783,0L15.904,2.122z"></path>
</g>
</svg>
</div>
</div>
<div class="tabs__button">
<div class="tabs__icon-point">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 36.107 45.229" enable-background="new 0 0 36.107 45.229" xml:space="preserve">
<g>
<path fill="#fc8e05" d="M17.41,0.012C8.418,0.327,0.949,7.338,0.086,16.287c-0.178,1.79-0.074,3.523,0.24,5.184l0,0
c0,0,0.027,0.195,0.121,0.565c0.279,1.243,0.695,2.448,1.215,3.58C3.473,29.9,7.656,37.068,17.047,44.867
c0.576,0.483,1.42,0.483,2.004,0c9.391-7.789,13.576-14.958,15.395-19.261c0.529-1.131,0.938-2.328,1.217-3.579
c0.082-0.362,0.119-0.566,0.119-0.566l0,0c0.215-1.112,0.326-2.253,0.326-3.421C36.107,7.857,27.672-0.35,17.41,0.012z
M18.049,27.016c-4.844,0-8.768-3.922-8.768-8.763s3.924-8.764,8.768-8.764s8.77,3.923,8.77,8.764S22.893,27.016,18.049,27.016z"></path>
</g>
</svg>
</div>
<div class="tabs__link-place">
<a href="#" class="tabs__link">Стойки</a>
</div>
<div class="tabs__icon-tick">
</div>
</div>
</div>
<div class="point">
<div class="point__svg">
<svg version="1.1" id="myicon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36.107px" height="45.229px" viewBox="0 0 36.107 45.229" enable-background="new 0 0 36.107 45.229" xml:space="preserve">
<g>
<path fill="#ffbb42" d="M17.41,0.012C8.418,0.327,0.949,7.338,0.086,16.287c-0.178,1.79-0.074,3.523,0.24,5.184l0,0
c0,0,0.027,0.195,0.121,0.565c0.279,1.243,0.695,2.448,1.215,3.58C3.473,29.9,7.656,37.068,17.047,44.867
c0.576,0.483,1.42,0.483,2.004,0c9.391-7.789,13.576-14.958,15.395-19.261c0.529-1.131,0.938-2.328,1.217-3.579
c0.082-0.362,0.119-0.566,0.119-0.566l0,0c0.215-1.112,0.326-2.253,0.326-3.421C36.107,7.857,27.672-0.35,17.41,0.012z
M18.049,27.016c-4.844,0-8.768-3.922-8.768-8.763s3.924-8.764,8.768-8.764s8.77,3.923,8.77,8.764S22.893,27.016,18.049,27.016z"></path>
</g>
</svg>
</div>
<div class="popup">
<div class="popup__window">
<div class="popup__icon-cross">
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
<polygon points="15,7 8,7 8,0 7,0 7,7 0,7 0,8 7,8 7,15 8,15 8,8 15,8 "></polygon>
</svg>
</div>
<h4 class="popup__title">Гостинница Рамада</h4>
<p class="popup__text">Адрес: ул. Ильюшина(Авиационный)1 Б. Домодедово, Московская обл. 142007</p>
<p class="popup__contact">Телефон: 8(495)723-10-03</p>
</div>
</div>
</div>
</div>
</div>
<div id="tabs2" class="tabs__block">
Первая вторая.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non, quos sed ipsam blanditiis officiis harum doloremque quasi, commodi repudiandae itaque provident dolorem doloribus dolores, libero porro inventore quae possimus facilis. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus quo ad ut deleniti. Laboriosam ab cumque illo ea totam cupiditate quisquam magni molestias consectetur voluptatum, mollitia voluptate officia qui.
</div>
<div id="tabs3" class="tabs__block">
Первая третья.Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni sequi animi nemo eligendi dolorum ullam facere, veniam aperiam dolore enim, similique sed dicta architecto deserunt saepe doloribus adipisci eum nobis. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Non, quos sed ipsam blanditiis officiis harum doloremque quasi, commodi repudiandae itaque provident dolorem doloribus dolores, libero porro inventore quae possimus facilis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Aliquam doloribus quo ad ut deleniti. Laboriosam ab cumque illo ea totam cupiditate quisquam magni molestias consectetur voluptatum, mollitia voluptate officia qui.
</div>
</div>
</div>
</div>
<script src="/js/index.js"></script>
Для решения Вашей задачи js не нужен в принципе: табы можно сделать с помощью радиобатонов и менять стили картинки у активных и неактивных вкладок. Я в своём примере для простоты использовал css-filter, но если надо именно менять картинки, то можно вставить их через background-image и у активного таба менять url фона. А самый оптимальный вариант - вставить логотипы в svg и просто менять цвет заливки. В общем, вариантов достаточно:
* {
box-sizing: border-box;
}
input {
display: none;
}
.tabs {
display: flex;
justify-content: center;
border-bottom: 3px solid green;
padding: 10px 20px 0;
}
.tab {
width: 40%;
cursor: pointer;
background-color: #faf7f2;
border: 3px solid #f2f2f2;
position: relative;
bottom: -3px;
}
.tab:before {
content: '';
display: block;
height: 3px;
position: absolute;
bottom: -3px;
left: -3px;
right: -3px;
background-color: green;;
}
.tab img {
max-width: 100%;
padding: 10px;
filter: grayscale(100%);
}
#dom:checked ~ [for="dom"],
#zhuk:checked ~ [for="zhuk"] {
background-color: #fff;
border: 3px solid green;
}
#dom:checked ~ [for="dom"]:before,
#zhuk:checked ~ [for="zhuk"]:before {
background-color: #fff;
left: 0;
right: 0;
}
#dom:checked ~ [for="dom"] img,
#zhuk:checked ~ [for="zhuk"] img {
filter: grayscale(0);
}
<div class="tabs">
<input type="radio" name="aero" id="dom" checked>
<input type="radio" name="aero" id="zhuk">
<label class="tab dom" for="dom"><img src="https://i.ibb.co/d6pYcPH/dom.png" alt=""></label>
<label class="tab zhuk" for="zhuk"><img src="https://i.ibb.co/DfPhcZh/zhuk.png" alt=""></label>
</div>
