Скрытие HTML-контента с помощью JavaScript через имена классов

Question

Я не хотел задавать этот вопрос, но после поиска соответствующих статей здесь, я должен.В моем коде есть 7 навигационных ссылок с одним и тем же классом, и поскольку html довольно длинный, я хочу иметь возможность скрывать содержимое до тех пор, пока не будет нажата ссылка, а также, чтобы содержимое исчезало при нажатии другой навигационной ссылки;оставляя место для следующего.Я бы предпочел ответ в Vanilla JS, потому что это то, что я изучаю сейчас.Вот ссылка на мою ручку, пожалуйста: Codepen

   <ul>
  <a href="#Hello_World" class="nav-link" onclick='myFunction()'>
    <li>Hello World</li>
  </a>
  <a href="#Introducing_JSX" class="nav-link">
    <li>Introducing JSX</li>
  </a>
  <a href="#Rendering_Elements" class="nav-link">
    <li>Rendering Elements</li>
  </a>
  <a href="#Components_and_Props" class="nav-link">
    <li>Components and Props</li>
  </a>
  <a href="#State_and_Lifecycle" class="nav-link">
    <li>State and Lifecycle</li>
  </a>
  <a href="#Handling_Events" class="nav-link">
    <li>Handling Events</li>
  </a>
  <a href="#Thinking_in_React" class="nav-link">
    <li>Thinking in React</li>
  </a>

</ul>

Вот пример моей навигационной панели.

Отказ от ответственности: Я полностью новичок в js.Спасибо за ваше терпение и время.

Answer 1

Я использую этот учебник в качестве руководства.

CSS

.tabcontent{display:none}

HTML

<ul>
    <li>
        <button id="default" class="tablinks" onclick="myFunction('helloWorld')">Hello World</button>
        <div id="helloWorld" class="tabcontent">
            <ul><li>1</li><li>2</li><li>3</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('jsx')">JSX</button>
        <div id="jsx" class="tabcontent">
            <ul><li>Intro JSX</li><li>Intro JSX 2</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('react')">React</button>
        <div id="react" class="tabcontent">
            <ul><li>intro raect 1</li><li>intro react 2</li></ul>
        </div>
    </li>
</ul>

JS

function myFunction(id){
    var i, tabcontent;

    // 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";
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(id).style.display = "block";
}

document.getElementById("default").click();