我如何创建一个导航栏，当点击它时，它会在同一页上打开？

<ul>
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">
  <!-- Section 1 content -->
</div>

<div id="section2">
  <!-- Section 2 content -->
</div>

<div id="section3">
  <!-- Section 3 content -->
</div>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

li {
  display: inline;
}

li a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #000;
}

li a:hover {
  background-color: #555;
  color: #fff;
}

var sections = document.querySelectorAll('div[id^="section"]');

function showSection(sectionId) {
  sections.forEach(function(section) {
    section.style.display = 'none';
  });
  
  var section = document.getElementById(sectionId);
  section.style.display = 'block';
}

var navLinks = document.querySelectorAll('ul li a');
navLinks.forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    var sectionId = link.getAttribute('href').substring(1);
    showSection(sectionId);
  });
});