Martin said:
Hi,
I have a webapp that has several jsp pages. The main page has a left
nav and it loads the sub pages when requested. Can somebody please give
an easy way to track the jsp page you are currently viewing and then
highlight the left nav accordingly.
Ex. My left nav has three items Company, Profile, About.
When user is clicking on pages under company (there can be more than
one sublevel) Company on the left nav is to be highlighted.
Thanks,
Martin
Yes, it can be done. I'm guessing that you have onmouseover/out
functions that make the button change, or maybe you've used CSS
but the technique is much the same.
When the page loads, have a function run over the links and for
any that have an href filename that matches the file name of the
current page, set the link to the required state and remove the
onmouseover/out functions.
An example is below. Just save is as index.html and blah.html.
Whichever page is loaded, its link will be solid red and won't
display any onmouseover/out behaviour. If you've used CSS, just
use the same thing to modify the class or whatever. If you've
used an image, just set the image src and onmouseout image src
to the same as the onmouseover image src.
Of course this method fails if you've used javascript links
(bad) or added anchors to the links, but that can be dealt with
too in the getFilename() function. I've replaced the
onmouseover/out with an empty function 'cos I can't seem to
remove them.
<html><head><title>play</title>
<script type="text/javascript">
function fixLinks() {
var docFile = getFilename(document.location + '');
var lnks = document.links;
var len = lnks.length;
for (var i=0; i<len; i++) {
if ( getFilename(lnks
.href) == docFile){
lnks.style.color = 'red';
lnks.onmouseover = emptyFn;
lnks.onmouseout = emptyFn;
}
}
}
function getFilename(x) {
var cutFrom = +x.lastIndexOf('/') + 1;
return x.substring(cutFrom,x.length);
}
function emptyFn() {}
</script>
</head><body onload="fixLinks();">
<a href="index.html"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'"
<a href="blah.html"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'"
</body></html>