Как сделать так, чтобы при нажатии на один из элементов меню, у другого менялся цвет?
Вложений: 1
Как сделать, чтобы при клике на один из li в .sidebar-menu один из кружков-элементов li в .sidebar-nav менял цвет фона на белый, путем добавления к нему класса .actived? Причем, когда происходит нажатие на один из li в .sidebar-menu, кружок из .sidebar-nav должен менять цвет в соответствии с тем элементом, на который было совершено нажатие. Например, нажали на "Сайт-визитка" и загорается первый кружок, нажали на "Интернет-магазин" и загорается третий кружок.
Сам сайт ct03638.tmweb.ru Весь код https://jsfiddle.net/pjzs9uxw/
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card"><a href="#">Сайт-визитка</a></li>
<li id="landing"><a href="#">Landing page</a></li>
<li id="market"><a href="#">Интернет-магазин</a></li>
<li id="corp"><a href="#">Корпоративный сайт</a></li>
<li id="bitrix"><a href="#">1C Битрикс</a></li>
<li id="advertising"><a href="#">Контекстная реклама</a></li>
<li id="seo"><a href="#">SEO оптимизация</a></li>
<li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
<li id="marketing"><a href="#">Контент-маркетинг</a></li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>
|
установка класса по индексу клика
Tempest,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.actived {
background-color: rgba(255, 0, 0, 1);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const menu = document.querySelector(".sidebar-menu");
const menuLi = [...menu.querySelectorAll("li")];
const nav = document.querySelector(".sidebar-nav");
const navLi = [...nav.querySelectorAll("li")];
let index = 0;
const setActive = i => {
menuLi[index].classList.remove("actived");
navLi[index].classList.remove("actived");
index = i;
menuLi[index].classList.add("actived");
navLi[index].classList.add("actived");
}
menu.addEventListener("click", function(event) {
event.preventDefault();
let target = event.target;
if (target = target.closest("li")) {
let i = menuLi.indexOf(target);
setActive(i);
}
});
nav.addEventListener("click", function(event) {
event.preventDefault();
let target = event.target;
if (target = target.closest("li")) {
let i = navLi.indexOf(target);
setActive(i);
}
});
});
</script>
</head>
<body>
<section class="services" id="services">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card"><a href="#">Сайт-визитка</a></li>
<li id="landing"><a href="#">Landing page</a></li>
<li id="market"><a href="#">Интернет-магазин</a></li>
<li id="corp"><a href="#">Корпоративный сайт</a></li>
<li id="bitrix"><a href="#">1C Битрикс</a></li>
<li id="advertising"><a href="#">Контекстная реклама</a></li>
<li id="seo"><a href="#">SEO оптимизация</a></li>
<li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
<li id="marketing"><a href="#">Контент-маркетинг</a></li>
</ul>
<ul class="sidebar-nav">
<li class="business-card"></li>
<li class="landing"></li>
<li class="market"></li>
<li class="corp"></li>
<li class="bitrix"></li>
<li class="advertising"></li>
<li class="seo"></li>
<li class="promotion"></li>
<li class="marketing"></li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:03. |