css导航栏不变内容变

在网页中，导航栏是非常重要的一个组成部分。一般来说，为了使用户能够方便地浏览网站的不同页面，我们会提供一个包含链接的导航栏。但是，如果每个页面的内容都相同，那么这个导航栏就没有什么意义了。因此，我们需要能够在保持导航栏不变的情况下，让网页内容发生变化。

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
}

.nav a {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  color: #fff;
  padding: 0 20px;
}

.active {
  background-color: #fff;
  color: #333;
}

上面的代码是一个简单的CSS导航栏样式。其中，“.nav”是导航栏的CSS类，设置了固定位置、背景颜色等属性。导航栏中的每个链接使用了“a”标签，并设置了颜色、内边距等属性。当某个页面被选中时，我们可以为对应的链接添加“active”类，这样就能改变链接的背景颜色和文字颜色。

下面是一个使用该导航栏的HTML页面：

<div class="nav">
  <a href="#" class="active">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<div class="content">
  <p>这里是首页的内容。</p>
</div>

这个页面中包含了导航栏和一个内容区域。此时，首页的链接被选中，所以我们为它添加了“active”类。图片展示的是样式效果

如果我们要切换到关于页面，只需要先移除首页链接的“active”类，然后将它添加到关于页面的链接上就行了。这样，导航栏不会发生改变，但是内容区域中显示的内容却变成了关于页面的内容。

总之，通过合理地运用CSS和JavaScript，我们可以实现一个简单却非常有用的导航栏，让用户能够方便地浏览我们的网站。