href 不加载 html 的脚本

Question

我在我的网页中创建了一个导航栏，它使用 href 链接到不同的 html 文件。 navbar.html 有 javascript 来更改活动链接 UI，以向用户显示我像这样加载的单击了哪个项目。

navbar.html

<script>
   require('../assets/navbar.js');
</script>

navbar.js

$('#sidebar-button').click(function() {
    $('.ui.sidebar').sidebar('toggle');
 });

 $('div.sidebar-items > a').click(function() {
    $(this).attr('class', 'active item');
    $(this).siblings().attr('class', 'item');

    $(this).find('i').addClass('teal');
    $(this).siblings().find('i').removeClass('teal');

    $('.ui.sidebar').sidebar('toggle');
 });

它将成功加载另一个 html 页面，我在 search.html 中包含相同的 navbar.html：

search.html

<script> $(function() {
         $('#navbar').load("../html_pages/navbar.html", function() {
               $.getScript("../assets/navbar.js")
           });
      });
</script>

但是，活动链接不会更改为单击的相应页面（在本例中为 search.html）。导航栏只是在编写原始 html 时加载。如何让navbar.js 在加载另一个页面时也执行并更改 html？

Answer 1

除非它也是一个 Jquery 函数，否则require() 是一个 Node JavaScript 函数。您应该收到类似于“require 不是函数”或“require 未定义”的错误。

我相信你的 HTML
<script> require('../assets/navbar.js'); </script>

应该是
<script src='../assets/navbar.js'></script>

这会将 JavaScript 从源 src 文件加载到脚本所在的 HTML 页面中，尽管这是一个相对标签，因此可能需要修改为相对于您将其应用到的任何页面。