Setting active on class with separate menu file

Question

Setting active on class with separate menu file

945 Views Asked by Zedd Almighty At 09 December 2016 at 04:49

So I'm trying to set "active" class on a list item from bootstrap menu. I have my menu file separate from all other html files so I don't have to maintain multiple menu code across my site. I'm using jquery to load the menu file like so

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

Inside the menu file I have this code I got from another answer on this site. While it does work it won't load the html files and stays on the index.html

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

If I remove e.preventDefault(); and change function (e) to function () it will load the html files but it will not set class active

I've tried putting the code into the main html files and it doesn't work at all. I've tried putting it into my seperate JS file for all of my custom js and it doesn't work. By adding the code to the top of the menu.html inside script tags has been the only way for me to get any kind of result.

Any help would be much appreciated.

EDIT: nav menu html code

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

Original Q&A

There are 3 best solutions below

Karthick Nagarajan On 09 December 2016 at 05:05

Jsut try this simple 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>

mahi-man On 09 December 2016 at 07:19

You need to add the click function after the menu.html has been rendered. You can use the callback function of the load like:

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

Note depending of your requirement, you might want to look at toggleClass instead of your removeClass/addClass

**Zedd Almighty** · Accepted Answer · 2016-12-09T21:39:08.643000

I figured out the answer, well, work around. This way I think is better anyway and also better code management. I had it backwards. I was trying to insert the menu and footers into every page. What I should be doing, and am now doing, is injecting the links into the index page that contains the menu and footer. After changing around some code it works perfect. For the those of you who may have this same question, or problem, the JS code for the menu is

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

The js code for loading the links into the page (also loads the about.html when the page is loaded) is

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

I just duplicated the same code for the footer links and attached "f" to the end of each ID for example #work is #workf for the footer.

I hope this is clear enough for anyone who is searching for the same solution.

Setting active on class with separate menu file

There are 3 best solutions below

Related Questions in TWITTER-BOOTSTRAP

Related Questions in ADDCLASS

Trending Questions

Popular # Hahtags

Popular Questions