Adsense

Jquery menu navigation

<h3>Info</h3>
 <ul id="sidebar_content">
   <li><a href="/info/news">News</a></li>
   <li><a href="/info/articles">Articles</a></li>
   <li><a href="/info/resources">Resources</a></li>
   <li><a href="/info/about">About</a></li>
 </ul>
Now we add our dash of JavaScript spice...

 function select_nav() {
   var nav_links = document.getElementById('sidebar_content')
     .getElementsByTagName('a');
   var selected = location.pathname;
 
   for (var i = 0; i < nav_links.length; i++) {
     var link = nav_links[i].pathname;
   
     // fiddle IE's view of the link
     if (link.substring(0, 1) != '/')
       link = '/' + link;
   
     if (link == selected)
       nav_links[i].setAttribute(cattr, 'selected');
   }
 }

 window.onload = function() {
   select_nav();
 };


 $(function(){
   var path = location.pathname.substring(1);
   if ( path )
     $('#sidebar_content a[href$="' + path + '"]').attr('class', 'selected');
 });
Note: the a[href$= part is saying that any anchor tag whose "href" attribute value ends exactly with the string location.pathname.substring(1).

newest questions on wordpress