data-toggle='tab' or ='pills' not allowing the url to work

Question

Firs of all I wanted to say that I have read a lot about it online and all the solutions found I could not implement them properly, some repaired some problems but created others. Another thing is that I cannot comment on other posts because of low reputation (noob), if I could do that I would not be posting a new question.

I am creating a website with a navbar with different pages for each part of the website: Home.html, AboutUs.html...

I implemented the navbar, but I think is not a good solution to paste the same code of the navbar in each page so I looked for a way to optimizing it.

For now I created another site (Navbar.html) and added it into the other pages and it looks good:

<script>
    $(function(){
        $("#navbar").load("Navbar.html");
    });
</script>

and inside the body:

<div id="navbar"></div>

The problem occurred when trying to automatize the "active" class. For that I tried both data-toggle='tab' and data-toggle='pill' but in both cases the active changed but when clicking the button the webite didn't change. There is the code:

<ul class="nav navbar-nav" >
    <li class="menuText"><a href="Home.html" data-toggle="tab" >Home</a></li>
    <li class="menuText"><a href="AboutUs.html" data-toggle="tab" >About Us</a></li>
    <li class="menuText"><a href="Donate.html" data-toggle="tab" >Donate</a></li>
    <li class="menuText"><a href="Volunteer.html" data-toggle="tab" >Volunteer</a></li>
    <li class="menuText"><a href="Contact.html" data-toggle="tab" >Contact</a></li>
</ul>

I also tried redirecting it with a .js file:

$('#home').load('Home.html');
$('#aboutus').load('AboutUs.html');
$('#donate').load('Donate.html');
$('#volunteer').load('Volunteer.html');
$('#contact').load('Contact.html');

it worked perfectly and it changed pages when the button was clicked, but I found that if I scrolled down there was the first page I opened constantly there below the changing page. (hard to explain this, hope you understood)

I also tried adding lots of functions found online but I didn't really know if they were working. I think I didn't implemented them correctly or in the wrong place. I'm a noob in html. I don't really know how to call the function :S Example:

    $(function(){
        var hash = window.location.hash;
        hash && $('ul.nav a[href="Home.html"]').tab('show');

        $('.nav-tabs a').click(function (e) {
            $(this).tab('show');
            var scrollmem = $('body').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        });
    });

Is there anyway I can do it, or another way to automatize the "active" class in each page?

Thank you for your time

Answer 1

This should give you what you want:

$(function() {
   var mynavbar = $("#navbar"); //cache it
   mynavbar.load("Navbar.html");
   // remove any current active if found in markup:
   mynavbar.find('ul.nav li').removeClass('active');

   var url = window.location;// get location

   // add the active class to current url detected href
   // Will work for absolute hrefs, might have to adjust for others
   mynavbar.find('ul.nav li').find('a').filter(function() {
      return (url.href.indexOf(this.href) != -1);
   }).parent().addClass('active');

  // put the click handler for the navigation in place
  mynavbar.on('click', 'ul.nav li', function() {
     var myhref = $(this).find('a').attr('href');
     // just for debug   alert("proceed to: " + myhref);
     window.location.href = myhref;
  });
});

NOTE: IF you want to simply use the current page, loading content in a hashed area, that is different. In that case you will need to rework this and change this line:

window.location.href = myhref;

For example:

$('#mycontentcontainer').load(myhref);

IF you want to use tabbed content and load the content only on the click, that can also be done (but you said you wanted to navigate to the NEW page so I did not include that)

EDIT: NOTE: Looking ahead, the solution above with load might not work in all cases (load slow)...so use this instead: Only process the `nav after it is loaded.

function addActiveNavbar(mynavbar) {
  // remove any current active if found in markup:
  mynavbar.find('ul.nav li').removeClass('active');
  var url = window.location; // get location
  // Will work for absolute hrefs, might have to adjust for others
  mynavbar.find('ul.nav li').find('a').filter(function() {
    return (url.href.indexOf(this.href) != -1);
  }).parent().addClass('active');
}
$(function() {
  var mynavbar = $("#navbar"); //cache it
  addActiveNavbar(mynavbar);
  $.get("Navbar.html")
    .done(function(data) {
      mynavbar.html(data);
      // add the active class to current url detected href
      addActiveNavbar(mynavbar);
    });
  // put the click handler for the navigation in place
  mynavbar.on('click', 'ul.nav li', function() {
    var myhref = $(this).find('a').attr('href');
    // un-comment for debug   alert("proceed to: " + myhref);
    window.location.href = myhref;
  });
});