Showing 'active' tab on navigation - html

Question

I'm trying to show the active tag on my nav bar. It shows on all tabs EXCEPT one with a drop-down. I can't figure out why its not calling the class on this particular button. I'm obviously placing it in the wrong place. Any help with this issue would be much appreciated!
Code: (The first one is CORRECT - ie - index.php is currently active. Where do I place the code (class="active") to make the next button (WHAT WE DO) the active tab when clicked?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="list-inline">
<li class="active">
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>

Answer 1

If I understand you correctly, you need to check the URL. (In my demo I set it to a specific URL) Then, add a class to the li parent.
var page = 'whatwedo_qualitative.php';
var a = $('[href="' + page + '"]');
$('.dropdown').has(a).addClass('active');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar-default">
<ul class="nav navbar-nav list-inline">
<li>
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>

Answer 2

you need a javascript code to add/remove active class to the a link pressed.. something like this:
$("a").click(function() {
//remove all active class from a elements
$(this).addClass("active"); //add the class to the clicked element
});
a similar functionality is here: Add and remove a class on click using jQuery?