目录测试2

<!-- Article content -->
<article>
  <section id="section1">
    <h2>Section 1</h2>
    <p>Here is some text for section 1.</p>
  </section>

  <section id="section2">
    <h2>Section 2</h2>
    <p>Here is some text for section 2.</p>
  </section>

  <section id="section3">
    <h2>Section 3</h2>
    <p>Here is some text for section 3.</p>
  </section>
</article>

<script>
  function showSection(sectionNumber) {
    // Hide all sections except for the one with the given section number
    var sections = document.getElementsByTagName("section");
    for (var i = 0; i < sections.length; i++) {
      if (sections[i].id == "section" + sectionNumber) {
        sections[i].style.display = "block";
      } else {
        sections[i].style.display = "none";
      }
    }
    // Update the active link in the directory sidebar
    var links = document.getElementById("directory").getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      if (links[i].getAttribute("onclick") == "showSection(" + sectionNumber + ")") {
        links[i].classList.add("active");
      } else {
        links[i].classList.remove("active");
      }
    }
  }
  // Show the first section by default
  showSection(1);
</script>