O meu exemplo 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Á]

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    $(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');
            }
        });
    }

<!-- language: lang-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;
    }
    .nav li.active {
        background-color:green;
    }
    .nav li.active a {
        color:#fff;
        font-weight:bold;
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->