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

因此，我尝试从Bootstrap菜单上的列表项目中设置" Active"类。我的菜单文件与所有其他HTML文件分开，因此我不必在网站上维护多个菜单代码。我正在使用jQuery加载菜单文件，例如

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

在菜单文件中，我有此代码我从此站点上的另一个答案中获得的代码。虽然它确实有效，但不会加载HTML文件并留在索引上。html

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

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

我尝试将代码放入主HTML文件中，但根本不起作用。我尝试将其放入所有自定义JS的单独的JS文件中，但它不起作用。通过将代码添加到菜单的顶部。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>

jsut尝试这个简单的exapmle ...

<!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>

您需要在菜单之后添加点击函数。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

我弄清楚了答案，好吧，解决。无论如何，我认为这样的方式也更好，并且代码管理更好。我倒了。我试图将菜单和页脚插入每个页面。我应该做的事情现在正在做的是将链接注入包含菜单和页脚的索引页面。更改一些代码后，它的工作原理非常完美。对于那些可能有同样问题或问题的人，菜单的JS代码为

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

用于将链接加载到页面的JS代码（也加载页面时也加载了大约。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。

我希望这对寻找相同解决方案的任何人都足够清楚。

相关内容

最新更新

热门标签：