Question

所以我试图设置＆＃34;活跃＆＃34;来自bootstrap菜单的列表项上的类。我将菜单文件与所有其他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文件但不会将类设置为活动

我已经尝试将代码放入主要的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

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

<!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");
    });
});

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

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

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

3 个答案: