Change active Bootstrap menu item using html and css - html

Question

I want to be able to change which menu item in is active depending on which file I am in. I include menu.html (the file below) in my three files: a.html, b.html and c.html.
How can I do this using only html and css? I use the Boostrap menu.
I basically want to change the menu item which is active according to the current file I am in.
<ul id="navbar_menu" class="nav nav-tabs nav-justified">
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
</ul>

Answer 1

If I'm correct you should make an active class and added it to the actual active list-item.

Answer 2

To my understanding you're using PHP include for menu.
You can do this to automatically find the relevant menu to the current page:
In your 3 pages you add the "relevant class" to your div/section that is the wrapper:
<section class="a">
<!-- your php include for menu-->
</section>
Second page:
<section class="b">
<!-- your php include for menu-->
</section>
Third page:
<section class="c">
<!-- your php include for menu-->
</section>
And in your CSS:
.a > li#a {
/* Active Menu Style */
}
.b > li#b {
/* Active Menu Style */
}
.c > li#c {
/* Active Menu Style */
}
This will enable the menu for the current page with your php include file:
<ul>
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
</ul>