function to define current class in js

Question

What I want to do is to have a function that executes to define a "current" class to an <li> tag, depending on the page name. For example, if the page is named index.php, I want the function to determine if the link within the <li> tag is the same name as the page (index.php). I'm sorry I'm not the best at explaining this. Here's an example code.

<ul id="navigation"><li><a href="index.php"></li></ul>. 

I want the class "current" defined into the <li> tag if the link is the same as the page name. Is there any way to do this? Or am I on a futile mission?

Answer 1

Well...okay...

function liClass(context) {
   //Choose your parent node
   context = context || document;

   var pathparts = window.location.pathname.split('/'); //split on path
   var curfile = pathparts[pathparts.length-1]; //last item is the filename right?

   var lis = context.getElementsByTagName('li');
   for (var i=0, l=lis.length; i<l; i++) {
     var a = lis[i].getElementsByTagName('a');

     if (!a.length) continue; //li has no a, moving on...

     //Okay, this match might need some work, tried
     //to make it fairly forgiving, tweak for your needs
     if (a[0].href.indexOf(curfile) != -1) lis[i].className = 'current';
   }
}

Feel free to try it out, let me know if it works or not, cause I did not test it...

Answer 2

I think what you are asking is you want to change the look of links that are pointing to the present page. Here is what the code would look like.

var list=document.getElementsByTagName('a');
var page=window.location.pathname;
var i=list.length;
while(i--){
  if(list[i].src.indexOf(page)>0){
    list[i].className='current';
  }
}

Note this is not a very accurate method. The basic structure is correct, but for example a link somewebsite.com is actually pointing to somewebsite.com/index.php. So depending on the link this could cause a problem on the home page. Also, depending on how your links are setup you are probably going to have to the parse the page variable. It will return something like. /help/faq/foo.php while the page may only have a link to faq/foo.php. This all depends a lot on the setup of your site so I will leave it for you to tweak.

You added more details since I posted so I thought I would note that you would only need to make a list of the links in the <li> tags not all the <a> tags in the page.

Answer 3

Compare the href's of the location object, and the anchor DOM element. If they match, then that is the current class.

If the current page is http://www.example.com/home which contains a relative link,

<a href="/questions">Questions</a>

Then the href property of the DOM object will contain the absolute path, and not just the relative part.

link.href = "http://www.example.com/questions"

A function that loops through each link could then be written as,

function markCurrent(list) {
    var listItems = list.getElementsByTagName("li");

    for(var i = 0; i < items.length; i++) {
        var link = listItems[i].getElementsByTagName("a")[0];
        if(link && (link.href == location.href)) {
            listItems[i].className += ' current';
        }
    }
}

Pass the root <ul> node to the function.

markCurrent(document.getElementById("navigation"));