时间戳

首页 > 解决方案 > 如何在每个页面上重用我的 html 导航栏代码

javascript - 如何在每个页面上重用我的 html 导航栏代码

问题描述

我有这个navbar：

     <div class="dropdown">
            <a href="#header" class="smoothScroll" class="dropdown">Company</a>
            <div class="dropdown-content">
                <a href="index.html#about">About Us</a>
                <a href="site-pictures.html">Portfolio</a>
                <a href="team.html">Leadership Team</a>
            </div>
        </div>

我想做的就是把它放在我所有的页面上，所以我想像一个组件一样创建，然后我可以将它放在每个页面中，而无需逐行复制。喜欢反应。

所以我会这样做：

navbar = {

<div class="dropdown">
        <a href="#header" class="smoothScroll" class="dropdown">Company</a>
        <div class="dropdown-content">
            <a href="index.html#about">About Us</a>
            <a href="site-pictures.html">Portfolio</a>
            <a href="team.html">Leadership Team</a>
        </div>
    </div>

}

然后我想将navbar组件放入每个页面。这可能使用html吗？

这是我在评论的帮助下尝试过的：

<li>
        <div id="side-bar"></div>
        <script>

        document.getElementById("side-bar").innerHTML = <div class="dropdown">         <a href="#header" class="smoothScroll" class="dropdown">Company</a>         <div class="dropdown-content">             <a href="index.html#about">About Us</a>             <a href="site-pictures.html">Portfolio</a>             <a href="team.html">Leadership Team</a>         </div>     </div>
      </script>
        </li>

标签： javascripthtml

解决方案

在评论的帮助下，我所做的是：

  //navbar
document.getElementById("nav-bar").innerHTML = '<ul class="nav-menu list-unstyled"> <li><a href="index.html" class="smoothScroll">Home</a></li> <li> <div class="dropdown"> <a href="#header" class="smoothScroll" class="dropdown">Company</a> <div class="dropdown-content"> <a href="index.html#about">About Us</a><a href="site-pictures.html">Portfolio</a> <a href="team.html">Leadership Team</a>  </div> </div> </li> <li><a href="index.html#services" class="smoothScroll">Services</a></li> <li><a href="#contact" class="smoothScroll">Contact</a></li> </ul>'

在我的main.js文件中，我有上面的代码。然后在我所有的 html 文件中，我有这个：<div id="nav-bar"></div>. 它完美无缺。

推荐阅读