Hope I interpreted your question correctly.
You may need to use some javascript to do this. The current URL can be obtained using:
var url = document.URL;
Then you can compare this with the value in each link in the loop across all links. When you find the same value with the URL, you add CSS to change the color.
eg.
thelink.style.backgroundColor = "#F1F2F2";
And looping the elements can be done something like this (there was a time since I did it without jQuery, so I don’t know how this works, but this is the beginning.):
var links = document.getElementById('subnav').elements; for(var i = 0; i < links.length; i++) { if(links[i].getAttribute('href') === url){ links[i].style.backgroundColor = "#F1F2F2"; } }
So, assuming you have a bunch of <a> elements in the subnav div, this will go through them and compare them with the URL of the current page and change the color accordingly. This can be placed in the function associated with the onload event on the page.
Better yet, jQuery is to simplify the code and make it more secure in multiple browsers.
Given your comment below, what about this jQuery solution:
$(document).ready(function(){ $("#subnav a").each(function(){ if($(this).attr('href') == document.URL){ $(this).css("background-Color", "red"); } }); });
So you can install jQuery and add this to the top of your page. It basically looks at every <a> element in the subnav div and compares the href attribute with the url of the current page and makes changes to css if they match. You can change what changes are made.
Vincent ramdhanie
source share