css 怎样在不同页面使用同样的导览列
时间: 2023-06-19 22:07:50 浏览: 65
如果你想在不同的页面中使用相同的导航栏,可以将导航栏保存在单独的文件中,然后在每个页面中引用该文件。
具体步骤如下:
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>
```
这样,你就可以在不同的页面中使用相同的导航栏了。