如何将不同的 HTML 部分显示为网站的不同页面

Question

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<div class="main-container">
    <!--NAVAGATION-->
    <ul class="nav">
    <li><a href="#home"></a>Home</li>
    <li><a href="#about"></a>About</li>
    <li><a href="#robotics">Robotics</a></li>
    <li><a href="#books">Books</a></li>
    </ul>
</div>

<div class="main-content">
    <section class="home section" id="home">
        <!--home page content-->
    </section>
    <section class="about section" id="about">
        <!--about page content-->
    </section>          
    <section class="robotics section" id="robotics">
         <!--robotics page content-->
    </section>
    <section class="books section" id="books">
         <!--books page content-->
    </section>
</div>
    
</div>

</body>
</html>

大家好！我正在玩这个结构并尝试 link 每个部分到其相应的 NAV 选项，这样我就可以只显示所选的内容（作为不同的页面）。然而，使用节中的“id”属性结构和 NAV 选项的“href”属性并没有多大帮助，因为只切换页面上的内容，而不是页面本身。我已经尽力做到这一点，但这是我能做到的最好的。

Answer 1

您可以使用 CSS 伪 class :target 来执行此操作。默认情况下隐藏您的部分，当点击一个部分时，将该部分的显示更改为块：

section {
  display: none;
}

section:target {
  display: block;
}

<div class="main-container">
  <!--NAVAGATION-->
  <ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#robotics">Robotics</a></li>
    <li><a href="#books">Books</a></li>
  </ul>
</div>

<div class="main-content">
  <section class="home section" id="home">
    home page content
  </section>
  <section class="about section" id="about">
    about page content
  </section>
  <section class="robotics section" id="robotics">
    robotics page content
  </section>
  <section class="books section" id="books">
    books page content
  </section>
</div>

</div>

Answer 2

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>

  <div id="Page1" style="background-color:powderblue;">
    <h1>Hello I am In Section One Without Refresh </h1>
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>

  <div id="Page2" style="display:none;background-color:black;color:white;">
    
    <h1>Hello I am In Section Two Without Refresh </h1>
    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>

</body>
</html>

看到你可以像这样呈现你的部分使用Javascript它看起来像一个页面网站

如何将不同的 HTML 部分显示为网站的不同页面

How to display different HTML sections as different pages of a website

html

forms

sections