如何在多个页面中使用 <nav> 标签答案

【问题标题】：How to use a <nav> tag in more than one pages如何在多个页面中使用 <nav> 标签
【发布时间】：2019-01-01 23:36:17
【问题描述】：

我在索引页面中使用了一个导航标签，并且还想在第二页中使用它，但我想只保留一个相同的 css 文件。现在的问题是，如果我将在第二页的 css 文件中更改 .nav 样式，那么它将在索引页面中更改。我应该为每个页面制作单独的 css 文件还是还有其他解决方案？

我试图在第二个 html 页面中为 nav 提供 id 以使其在 css 文件中有所不同，但它没有在第二个页面导航中进行更改。

&nbsp&nbsp&nbsp 一二三

应该在第二页更改。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您可以向元素添加一个类并引用该特定类。例如：

<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>


.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }

希望有所帮助！

【讨论】：

【解决方案2】：

我的建议是，如果您想继续使用相同的 CSS 文件，可以将 id 属性添加到每个导航栏并使用 id 为它们赋予特定的 CSS 属性。

【讨论】：

【解决方案3】：

做 wordpress 主题的人和你有同样的要求。他们的解决方案是在 body 元素中添加一个 id 标签。

他们的 CSS 规则看起来像 ...

#page1 .nav {
 ...  your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}

HTML

<body id="page1">

<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>

规则 [#page1 .page1] 仅在 .page1 是 #page1 中的一个元素时才有效，该元素仅在 page1 上发生。所以我可以突出显示与加载的页面对应的菜单项。

【讨论】：