文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将不同的HTML部分显示为网站的不同页面

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

Stack Overflow用户

提问于 2020-10-03 04:14:17

回答 2查看 271关注 0票数 0

<!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>

伙计们，你们好！我正在使用这种结构，并尝试将每个部分链接到其相应的NAV选项，这样我就可以只显示所选的内容(作为不同的页面)。但是，在部分中使用"id“属性的结构和NAV选项中的"href”属性没有太大帮助，因为只切换页面上的内容，而不是页面本身。我已经尽力做到这一点，但这是我能做的最好的了。

html

forms

sections

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-03 04:41:48

您可以使用CSS伪类:target来完成此操作。默认情况下隐藏部分，当单击某个部分时，将该部分的显示更改为block：

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>

票数 0

Stack Overflow用户

发布于 2020-10-03 14:11:56

<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像这样呈现你的部分它看起来像一个页面的网站

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64177730

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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