Skip to main content

Set the active navigation item based on the page URL.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>highlight current navigation item</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
  $(document).ready(function() {

    var loc = window.location.href.toLowerCase();
    $('#nav .active').removeClass('active');

    if (loc.indexOf('browser.aspx') != -1) {
      $('#nav .nav-browser').addClass('active');
    } else if (loc.indexOf('retired.aspx') != -1) {
      $('#nav .nav-retired').addClass('active');
    } else if (loc.indexOf('search.aspx') != -1) {
      $('#nav .nav-search').addClass('active');
    } else if (loc.indexOf('help.aspx') != -1) {
      $('#nav .nav-help').addClass('active');
    } else {
      $('#nav .nav-browser').addClass('active');
    }

  });
  </script>
</head>
<body>
  <ul id="nav" class="nav">
    <li class="nav-browser active"><a href="Browser.aspx">Active</a></li>
    <li class="nav-retired"><a href="Retired.aspx">Retired</a></li>
    <li class="nav-search"><a href="Search.aspx">Search</a></li>
    <li class="nav-help"><a href="#"><i class="icon-question-sign icon-white"></i></a></li>
  </ul>
</body>
</html>