Чтобы сделать выделение цветом ссылки, на которую был произведен клик, вам понадобится использовать JavaScript. Вот пример кода, который демонстрирует этот функционал:
1. Сначала, вам нужно получить все ссылки из сайдбара. Вы можете выполнить это с помощью метода querySelectorAll
, который выберет все элементы, соответствующие заданному селектору. В данном случае, селектором будет sidebar a
.
const sidebarLinks = document.querySelectorAll('sidebar a');
2. Далее, необходимо добавить обработчик события click
к каждой ссылке. Вы можете использовать цикл forEach
, чтобы обойти все ссылки и привязать обработчик к каждой из них:
sidebarLinks.forEach(link => { link.addEventListener('click', function() { // ваш код обработки события клика }); });
3. Внутри обработчика события click
вы можете задать стиль для ссылки, которая была нажата. Например, вы можете изменить цвет фона или цвет текста. В данном примере, мы будем изменять цвет фона ссылки:
sidebarLinks.forEach(link => { link.addEventListener('click', function() { // сбросить стили всех ссылок sidebarLinks.forEach(link => { link.style.backgroundColor = ''; }); // задать выбранный цвет фона для текущей ссылки this.style.backgroundColor = 'yellow'; }); });
В этом примере мы сначала сбрасываем стили всех ссылок, устанавливая для каждой из них фон без цвета (пустая строка в данном случае). Затем мы устанавливаем выбранный цвет фона (в данном случае, желтый) для ссылки, на которую был клик.
Теперь, когда пользователь нажимает на ссылку в сайдбаре, она будет выделяться желтым цветом, а все остальные ссылки будут сброшены к своим исходным стилям. Вы можете изменить стили по вашему вкусу, просто изменяя соответствующие свойства CSS в обработчике событий click
.