使用css在不同页面上使用同样的导航代码

如果你想在不同的页面中使用相同的导航栏，可以将导航栏保存在单独的文件中，然后在每个页面中引用该文件。 具体步骤如下： 1. 创建一个包含导航栏的 HTML 文件，例如 `navbar.html`。 2. 在需要使用导航栏的页面中，使用以下代码将 `navbar.html` 引入到页面中： ```html <div id="navbar-placeholder"></div> <script> $(function(){ $("#navbar-placeholder").load("navbar.html"); }); </script> ``` 其中，`#navbar-placeholder` 是一个空的 `div` 元素，用于在页面中占位。`$(function(){})` 代码块会在页面加载完成后执行，使用 jQuery 的 `load()` 方法加载 `navbar.html` 文件，并将其插入到 `#navbar-placeholder` 中。 3. 使用 CSS 样式表对导航栏进行样式设计，并将样式表引入到 `navbar.html` 文件中。 4. 在每个页面中，为当前页面对应的导航栏链接添加一个 `active` 类，以便用户知道他们当前所在的页面。 例如，在首页中，你可以使用以下代码将首页链接标记为活动链接： ```html <nav> <ul> <li><a href="index.html" class="active">首页</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> ``` 在其他页面中，你可以将相应的链接标记为活动链接，例如： ```html <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html" class="active">关于我们</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> ``` 这样，你就可以在不同的页面中使用相同的导航栏了。