Create active links using common include

Here is how you can create active links using a common include for navigation using server side includes or .shtml pages without using javascript.

Step 1. Create active links using common include – Defining a variable to identify each page

Define a variable in each page using the below mentioned code. Here “page” is the name of the variable and “homepage’ is the value. This value will change for each page.

Step 2. Create active links using common include – Expression in common include to match the page name and link

Now here is the code of common file which holds the navigation.
We are defining a variable called “activeClass” which has the value “active”.
Feel free to change the variable name and class name as per your need. The code inside each ‘li’ tag will check for the current page value and apply a class “active”

Feel free to apply the same logic if you are working on a project which has multiple level navigation.

Click here to read more about variable in Server Side Includes

Click here if you are looking for a jquery solution

Please comment if you have any other suggestion which can improve this code or you have any difficulty.

We have used similar technique in PHP and I can write a quick tutorial for php beginners.