Как задать несколько разных кнопок для открытия одного таба?

Question

[Станислав Григорьев]

<script>
        function openTab(evt, name) {
            // Declare all variables
            var i, tabcontent, tablinks;

            // Get all elements with class="tabcontent" and hide them
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }

            // Get all elements with class="tablinks" and remove the class "active"
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }

            // Show the current tab, and add an "active" class to the button that opened the tab
            document.getElementById(name).style.display = "flex";
            evt.currentTarget.className += " active";

        }
        // Get the element with id="defaultOpen" and click on it
        document.getElementById("defaultOpen").click();

    </script>

В JS еще тупенький и не доходит куда нужно прописать доп. классы кнопок. При условии, что разные кнопки с разными классами т.к визуально сильно отличаются.

Answer 1

[Stalker_RED]

tablinks

Comments

[Станислав Григорьев]

поправил вопрос. под tablinks один вид кнопок

Answer 2

[Марат Гарифуллин]

<ul>
  <li class="tablinks" data-index="1">1</li>
  <li class="tablinks" data-index="2">2</li>
  <li class="tablinks" data-index="3">3</li>
</ul>
<div class="tabcontainer">
  <div class="tabcontent">
    1
  </div>
  <div class="tabcontent">
    2
  </div>
  <div class="tabcontent">
    3
  </div>
</div>

<a href="#" data-index="2">2</a>

function openTab(curIndex) {
            const tabcontent = document.getElementsByClassName('tabcontent');
            tabcontent.forEach((one, index) => {
              one.style.display = index != curIndex ? 'none' : 'flex';
            });

            const tablinks = document.getElementsByClassName('tablinks');
            tablinks.forEach((one, index) => {
              if (index != curIndex) one.classList.remove('active');
              else if (!one.classList.has('active')) one.classList.add('active');
            });
        }

            const links = document.querySelector('[data-index]');
            links.forEach(one => {
              one.addEventListener('click', () => openTab(one.dataset.index));
            });