HTML導(dǎo)航切換內(nèi)容

HTML導(dǎo)航切換內(nèi)容，是指通過點擊導(dǎo)航菜單中的選項，在同一頁面內(nèi)切換內(nèi)容。

HTML導(dǎo)航菜單

HTML導(dǎo)航菜單是由若干個菜單項組成的列表，可以使用

和
• 標簽組合實現(xiàn)：

  <ul>
  <li><a href="#">菜單1</a></li>
  <li><a href="#">菜單2</a></li>
  <li><a href="#">菜單3</a></li>
  </ul>

  HTML內(nèi)容切換

  HTML內(nèi)容切換可以通過隱藏或顯示元素的方式實現(xiàn)。隱藏或顯示元素，可以通過CSS的display屬性或JavaScript的style.display屬性實現(xiàn)。

  <div id="content1">內(nèi)容1</div>
  <div id="content2" style="display:none">內(nèi)容2</div>
  <div id="content3" style="display:none">內(nèi)容3</div>

  HTML導(dǎo)航切換內(nèi)容示例

  將HTML導(dǎo)航菜單和內(nèi)容切換結(jié)合起來，實現(xiàn)HTML導(dǎo)航切換內(nèi)容的效果：

  <script>
  function showContent(contentId) {
  var content = document.getElementById(contentId);
  var contents = document.querySelectorAll("#content-wrapper div");
  for (var i = 0; i< contents.length; i++) {
  contents[i].style.display = "none";
  }
  content.style.display = "block";
  }
  </script>
  <ul>
  <li><a href="#" onclick="showContent('content1')">菜單1</a></li>
  <li><a href="#" onclick="showContent('content2')">菜單2</a></li>
  <li><a href="#" onclick="showContent('content3')">菜單3</a></li>
  </ul>
  <div id="content-wrapper">
  <div id="content1">內(nèi)容1</div>
  <div id="content2" style="display:none">內(nèi)容2</div>
  <div id="content3" style="display:none">內(nèi)容3</div>
  </div>