Question

我是html和css的新手，并找到了我想要使用的侧边栏示例。问题是内容出现在所有侧边栏页面上。

如何将内容添加到其他页面？

我可以看到，当我点击它们时，网页会更改为不同的页面。但内容仍然相同。我认为这是错误的，或者我必须为每个页面创建一个类，但我不知道语法。

＆＃13;

    <head>
    <title>OpereX Project</title>
    <style>
    body 
    {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav 
    {
        height: 100%;
        width: 160px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #99ccff;
        overflow-x: hidden;
        padding-top: 20px;
    }
    
    .sidenav a 
    {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
    }
    
    .sidenav a:hover 
    {
        color: #f1f1f1;
    }
    
    .main 
    {
        margin-left: 160px; /* Same as the width of the sidenav */
        font-size: 28px; /* Increased text to enable scrolling */
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) 
    {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div class="sidenav">
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#clients">Clients</a>
      <a href="#contact">Contact</a>
    </div>
    
    <div class=main>
      <h2>Project</h2>
    </div>
         
    </body>
    </html>

＆＃13;

Answer 1

只有html才会有效。为了真正取代“主要”的内容。部分你必须使用JavaScript。你可以使用普通的javascript或使用一个流行的框架，如Angular或任何其他框架。如果你只想简单地坚持使用html和css，我可以看到两个选项：

1 - 您为每个内容创建一个单独的html页面，并在每个内容上复制 - 粘贴与常规布局和sidenav相关的所有内容，但放置不同的内容。然后，您将导航栏链接更改为指向其他html页面

<a href="services.html">Services</a>

这非常简单但是如果页面增长则需要管理，但是你会使用你知道的东西，这可能是学习基础知识的好方法。

2 - 您可以将所有内容放在单个页面上，并为不同的部分创建命名部分。然后保持链接不变，因为它们当前指向当前页面上的ID（＆＃39; #idname＆＃39;语法）。然后，您只需要为每个与链接匹配的部分添加ID。

<div id="clients">
    clients content
</div>

此时的链接只会将您的页面向下滚动到所选部分。这也不是你想要的，但这只适用于html和css。对于第二种方法的示例，请参阅此小提琴：https://jsfiddle.net/gouk0b8t/

Answer 2

你也应该制作其他页面，即about.html并在那里添加你的内容并将其添加到锚标记的href中，如下所示。

<head>
    <title>OpereX Project</title>
    <style>
    body 
    {
        font-family: "Lato", sans-serif;
    }
    
    .sidenav 
    {
        height: 100%;
        width: 160px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #99ccff;
        overflow-x: hidden;
        padding-top: 20px;
    }
    
    .sidenav a 
    {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
    }
    
    .sidenav a:hover 
    {
        color: #f1f1f1;
    }
    
    .main 
    {
        margin-left: 160px; /* Same as the width of the sidenav */
        font-size: 28px; /* Increased text to enable scrolling */
        padding: 0px 10px;
    }
    
    @media screen and (max-height: 450px) 
    {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div class="sidenav">
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="clients.html">Clients</a>
      <a href="contact.html">Contact</a>
    </div>
    
    <div class=main>
      <h2>Project</h2>
    </div>
         
    </body>
    </html>

Html编辑页面内容

2 个答案: