<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).
<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).