Как связать кнопку с контентом?
Есть ссылки (кнопки), у которых атрибуты data-name.
И есть 3 блока с контентом с идентичными каждой кнопке data-name.
Как связать данные кнопки с конкретным блоком контента через data-name?
Понимаю, что нужно объявить объявить массивы кнопок и контентной части, далее перебрать оба массива, на кнопки повесить клик и сделать проверку на сходство data-name, но вот как реализовать... не совсем получается.
<div class="row_category"> <ul class="list_category"> <li> <a data-name=".web" href="#" class="btn-work">button</a></li> <li> <a data-name=".video" href="#" class="btn-work">button</a></li> <li> <a data-name=".design" href="#" class="btn-work">button</a></li> </ul> </div> <div data-name=".web" class="main_content content_web" > <div class="container_fluid"> <div class="content"> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>contentсайта</p></div> </div> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div data-name=".video" class="main_content content_video" > <div class="container_fluid"> <div class="content content_video"> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div data-name=".design" class="main_content content_design"> <div class="container_fluid"> <div class="content content_design"> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> |
<div class="row_category"> <ul class="list_category"> <li> <a data-name=".web" href="#" class="btn-work">button</a></li> <li> <a data-name=".video" href="#" class="btn-work">button</a></li> <li> <a data-name=".design" href="#" class="btn-work">button</a></li> </ul> </div> <div data-name=".web" class="main_content content_web" > <div class="container_fluid"> <div class="content"> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>contentсайта</p></div> </div> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div data-name=".video" class="main_content content_video" > <div class="container_fluid"> <div class="content content_video"> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div data-name=".design" class="main_content content_design"> <div class="container_fluid"> <div class="content content_design"> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div> <div class="card_work"> <img src="images/works/work.jpg" alt="Image"> <div class="title_work"><h1>content</h1></div> <div class="about_work"><p>content</p></div> </div>
Дополнительно:
document.querySelectorAll('a[data-name]').forEach(link => { let name = link.dataset.name; let contentBlock = document.querySelector(`div[data-name="${name}"]`); console.log(contentBlock); }); |
document.querySelectorAll('a[data-name]').forEach(link => { let name = link.dataset.name; let contentBlock = document.querySelector(`div[data-name="${name}"]`); console.log(contentBlock); });
- Такое сделать я смог изначально. Просто когда делаешь проверку на совпадение data-name, а далее присваиваешь, чтобы блок показывался, он почему то присваивает всем блокам, а не тому, который совпадает по data-name
- LordeckiyDavid, Если бы вы проверили мой код, то не пришлось бы писать этот комментарий...
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для связывания кнопки с контентом на веб-странице можно использовать различные подходы в зависимости от требований и целей вашего проекта. Ниже приведены несколько способов, которые могут быть полезны в данной ситуации:
1. Использование JavaScript:
Для этого вы можете добавить обработчик событий к кнопке, который будет показывать или скрывать контент при нажатии на нее. Например, вы можете добавить класс "hidden" к блоку с контентом и при нажатии на кнопку этот класс будет добавляться или удаляться. Пример кода на JavaScript:
document.querySelector('.btn').addEventListener('click', function() { document.querySelector('.content').classList.toggle('hidden'); });
2. Использование CSS:
Вы также можете использовать только CSS для связывания кнопки с контентом. Например, можно использовать псевдокласс ":checked" для чекбокса и связать его с контентом. Пример кода на CSS:
#toggle:checked + .content { display: block; } .content { display: none; }
3. Использование jQuery:
Если вы используете jQuery, то можно использовать методы этой библиотеки для управления отображением контента. Пример кода на jQuery:
$('.btn').click(function() { $('.content').toggle(); });
Это лишь некоторые из возможных способов связывания кнопки с контентом. Выберите подход, который лучше всего подходит для вашего проекта и требований.