网站所有页面上的导航相同

Question

我想在我的网站的所有页面上创建一个垂直导航，除了表示所选页面的html项目（将突出显示/与其他单词不同的颜色）。在所有页面上重复使用相同div的最佳方法是什么？

Answer 1

将垂直导航内容保存在单独的HTML文件中。并使用jquery load（）函数将其加载到页面中。

例如，请考虑要在所有页面中显示的 navigation.html 。在所有页面中创建一个空的

<div id="verticalNav"></div>

并加载navigation.html，如下所示：

$("#verticalNav").load('navigation.html');

并且，您可以通过向相应页面上的项目添加css类来突出显示表示所选页面的所选项目。假设您在垂直导航中有一个li元素：

<li id="contact"><a href="www.someurl.com/contact.html">contactUs</a></li>

点击它后，您将显示 contact.html 页面。因此，在contact.html文件中，您可以通过添加类来突出显示所选项目：

$("li#contact").addClass("highlight");

并且，您可以将高亮类指定为：

.highlight a{
    color: orange; 
 }

Answer 2

通常人们在他们选择的服务器/客户端框架中使用HTML模板工具将HTML文件分成部分并以不同方式组合它们。如果您不想涉及任何服务器或客户端逻辑，则可以使用Gulp（资产编译器）和extension

之类的内容编译自己的HTML部分

然后你会对你的导航有所了解，只需将它包含在你的页面中，例如：

<div>
   <!-- @@navigation-->
</div>