bootstrap navbar class=active change when coming from a separate page

Question

I've been trying out solutions to similar cases but none of them work so far.

Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.

Here's from the index.html file:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="support" ><a href="support.html">Support</a></li>
        <li ><a href="#contact">Contact</a></li>
</ul>
</div>

and here's from support.html :

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html#home">Home</a></li>
        <li><a href="index.html#about">About</a></li>
        <li class="current"><a href="#support">Support</a></li>
        <li ><a href="index.html#contact">Contact</a></li>
    </ul>
</div>

This is one of the solutions that I tried with no results: https://stackoverflow.com/a/11539359

JS is not my strong suit, thank you so much for your help!

Answer 1

There were lot of issues with the way you are loading scripts for example

 $(document).ready(function() {
        $('#ind').cycle({
            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });

you are calling this before the jquery is loaded so it gives $ is undefined error , so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions

I have included the fix in the following file HTML Zip files , you will find all JS moved to end. Its working fine for me now

One more thing make your contact height same as other container or remove extra margin/padding from Physicians section