我是html和css的新手，并找到了我想要使用的侧边栏示例。问题是内容出现在所有侧边栏页面上。
如何获取其他页面的内容？
我可以看到，当我点击它们时，网页会更改为不同的页面。但内容仍然相同。我认为这是错误的，或者我必须为每个页面创建一个类但我不知道语法。
<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> 仅使用html，它不会像那样工作。为了实际替换'main'部分的内容，您必须使用javascript。你可以使用普通的javascript或使用一个流行的框架，如Angular或任何其他框架。如果你只想简单地坚持使用html和css，我可以看到两个选项：
1 - 您为每个内容创建一个单独的html页面，并在每个内容上复制粘贴与一般布局和sidenav相关的所有内容，但放置不同的内容。然后，您将导航栏链接更改为指向其他html页面
<a href="services.html">Services</a>
这很简单，但如果页面增长则需要管理的噩梦，但是你将使用你知道的东西，这可能是学习基础知识的好方法。
2 - 您可以将所有内容放在单个页面上，并为不同的部分创建命名部分。然后保持链接不变，因为它们当前指向当前页面上的ID（'#idname'语法）。然后，您只需要为每个与链接匹配的部分添加ID。
<div id="clients">
clients content
</div>
此时的链接只会将您的页面向下滚动到所选部分。这也不是你想要的，但这只适用于html和css。请看第二种方法的例子：https://jsfiddle.net/gouk0b8t/
您还应该创建其他页面，即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>