Question

By “active” I mean to have the link pointing to the current page classed as “active.” This way the link’s appearance can be modified using css.

Is it possible to implement an active link navigation without using a server side language? I would like to only use CSS/HTML/jQuery if possible. If there are, what are those methods? Assuming you want to create the following structure:

<ul id="nav">
   <li class="active">Home</li>
   <li>About</li>
   <li>Contact</li>
</ul>

Answer 1

You have 2 choices.

1. Serverside you determine which link is highlighted, and add the CSS class as you’ve done.
2. Per page you create, you manually add some JavaScript, that adds the class.

e.g. if you were using jQuery, you could do:

<ul id="nav">
   <li id="home">Home</li>
   <li id="about">About</li>
   <li id="contact">Contact</li>
</ul>

<script>
  $(document).ready(function(){
    $('#contact').addClass('active');//set the Contact "tab" as the active link
  });
</script>

If at all possible though, I’d opt for #1… doing this server-side when you “build” the menu structure as this will be easier to maintain in the long run.