使用单独的菜单文件在 class 上设置活动

Question

所以我试图在 bootstrap 菜单的列表项上设置 "active" class。我的菜单文件与所有其他 html 文件分开，因此我不必在我的网站上维护多个菜单代码。我正在使用 jquery 像这样加载菜单文件

$(function () {
    $("#MainMenu").load("menu.html");
});

在菜单文件中，我有这段代码是从本网站的另一个答案中获得的。虽然它确实有效，但它不会加载 html 文件并停留在 index.html

$("#myNavbar li").click(function (e) {
    e.preventDefault();
    $('#myNavbar li').removeClass('active');
    $(this).addClass('active');
});

如果我删除 e.preventDefault(); 并将 function (e) 更改为 function ()，它将加载 html 文件，但不会设置 class 活动

我已经尝试将代码放入主 html 文件中，但它根本不起作用。我已经尝试将它放入我所有自定义 js 的单独 JS 文件中，但它不起作用。通过将代码添加到 menu.html 内部脚本标记的顶部是我获得任何结果的唯一方法。

如有任何帮助，我们将不胜感激。

编辑：导航菜单html代码

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">brand</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="#">Work</a></li> 
        <li><a href="#">Companies</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

试试这个简单的例子...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Nav Active</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <h3>Basic Navbar Example</h3>
    <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
  </div>

</body>
</html>
<script>
  $(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
 });
</script>

Answer 2

需要在menu.html渲染完成后添加点击功能。您可以使用负载的回调函数，如：

$("#MainMenu").load("menu.html", function() {
  //this gets executed after the load has finished
  $("#myNavbar li").click(function () {
    $(this).removeClass('active');
    $(this).addClass('active');
  });
});

请注意，根据您的要求，您可能希望查看 toggleClass 而不是 removeClass/addClass

Answer 3

我找到了答案，好吧，变通。无论如何，我认为这种方式更好，代码管理也更好。我倒退了。我试图将菜单和页脚插入到每一页中。我应该做的，现在正在做的，是将链接注入包含菜单和页脚的索引页面。更改一些代码后，它可以完美运行。对于那些可能有同样疑问或问题的人，菜单的 JS 代码是

//Load MENU HTML file
$(function () {
    $("#myNavbar li").click(function (e) {
        e.preventDefault();
        $('#myNavbar li').removeClass('active');
        $(this).addClass('active');
    });
});

将链接加载到页面中的js代码（在加载页面时也会加载about.html）是

//MENU LINKS
$(document).ready(function () {
    $("#include").load("about.html");

    $("#about").on("click", function () {
        $("#include").load("about.html");
    });
    $("#resume").on("click", function () {
        $("#include").load("resume.html");
    });
    $("#work").on("click", function () {
        $("#include").load("work.html");
    });
});

我只是为页脚链接复制了相同的代码，并将 "f" 附加到每个 ID 的末尾，例如 #work 是页脚的 #workf。

我希望对于正在寻找相同解决方案的任何人来说，这已经足够清楚了。

使用单独的菜单文件在 class 上设置活动

Setting active on class with separate menu file

twitter-bootstrap

addclass