Как связать кнопку с контентом?

Question

[LordeckiyDavid]

Есть ссылки (кнопки), у которых атрибуты 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>

Answer 1

[Сергей delphinpro]

document.querySelectorAll('a[data-name]').forEach(link => {
  let name = link.dataset.name;
  let contentBlock = document.querySelector(`div[data-name="${name}"]`);
  console.log(contentBlock);
});

Comments

[LordeckiyDavid]

Такое сделать я смог изначально. Просто когда делаешь проверку на совпадение data-name, а далее присваиваешь, чтобы блок показывался, он почему то присваивает всем блокам, а не тому, который совпадает по data-name

[Сергей delphinpro]

LordeckiyDavid, Если бы вы проверили мой код, то не пришлось бы писать этот комментарий...