O meu exemplo, FUNCIONA, faz um item de menu ativo com base na URL atual com jQuery:
[NÃO VAI FUNCIONAR AQUI POR CONTA DA URL, QUE NÃO MUDARÁ]Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// Get current url
// Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
var url = window.location.href;
$('.menu a[href="'+url+'"]').addClass('current_page_item');
});
</script>
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:AUTO;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
<ul class="nav">
<li><a href="#">INÍCIO</a>
</li>
<li>|</li>
<li><a href="#">MISSÃO</a>
</li>
<li>|</li>
<li><a href="#">QUEM SOMOS</a>
</li>
<li>|</li>
<li><a href="#">PESQUISADORES</a>
</li>
</ul>
</header>
<style type="text/css">
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:AUTO;
float:left;
}
</style>
HTML
<header>
<div class="menu">
<ul class="nav">
<li><a href="#">INÍCIO</a>
</li>
<li>|</li>
<li><a href="#">MISSÃO</a>
</li>
<li>|</li>
<li><a href="#">QUEM SOMOS</a>
</li>
<li>|</li>
<li><a href="#">PESQUISADORES</a>
</li>
</ul>
</div>
</header>