Question

Is there an easy way to add a bit about also setting the ancestor li tags to .active?

<script language="javascript" type="text/javascript">
function setActive() {
  aObj = document.getElementById('toc').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}
window.onload = setActive;
</script>

Answer 1

It depends on what you mean. I don’t get a full picture of what’s going on from your question. From the looks of it you’re grabbing an element with the id of “toc”, so I’m guessing this toc contains LI elements as well as A elements. In which case you could use an asterisk in getElementsByTagName, which could be slower depending on how many other elements are there.

function setActive() {
  var href = window.location + ''
    , el = document.getElementById('toc')
    , a = el.getElementsByTagName('*')
    , i = 0
    , l = a.length
    , name;

  for (; i < l; i++) { 
    el = a[i];
    name = el.nodeName.toLowerCase();
    if (name === 'li' || (name === 'a' 
        && ~href.indexOf(el.href))) {
      el.className = 'active';
    }
  }
}

If you’re asking for ancestral LI higher up in the document tree, this is what
you would want:

function setActive() {
  var href = window.location + ''
    , el = document.getElementById('toc')
    , a = el.getElementsByTagName('a')
    , i = 0
    , l = a.length;

  // descendants
  for (; i < l; i++) { 
    if (~href.indexOf(a[i].href)) {
      a[i].className = 'active';
    }
  }

  // parents
  while (el = el.parentNode) {
    if (el.nodeName.toLowerCase() === 'li') {
      el.className = 'active';
    }
  }
}