该例程在英文时较灵活:
<
div
id
="navigation"
>
< ul >
< li >< a href ="index.html" > Home </ a ></ li >
< li >< a href ="about.html" > About </ a ></ li >
< li >< a href ="photos.html" > Photos </ a ></ li >
< li >< a href ="live.html" > Live </ a ></ li >
< li >< a href ="contact.html" > Contact </ a ></ li >
</ ul >
</ div >
< ul >
< li >< a href ="index.html" > Home </ a ></ li >
< li >< a href ="about.html" > About </ a ></ li >
< li >< a href ="photos.html" > Photos </ a ></ li >
< li >< a href ="live.html" > Live </ a ></ li >
< li >< a href ="contact.html" > Contact </ a ></ li >
</ ul >
</ div >
相应的脚本:
function
highlightPage()
...
{
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("navigation")) return false;
var nav = document.getElementById("navigation");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++) ...{
var linkurl = links[i].getAttribute("href");
var currenturl = window.location.href;
if (currenturl.indexOf(linkurl) != -1) ...{
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
window.onload = highlightPage;
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("navigation")) return false;
var nav = document.getElementById("navigation");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++) ...{
var linkurl = links[i].getAttribute("href");
var currenturl = window.location.href;
if (currenturl.indexOf(linkurl) != -1) ...{
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
window.onload = highlightPage;
样式表:
#navigation a.here:link,
#navigation a.here:visited,
#navigation a.here:hover,
#navigation a.here:active {...} {
color: #eef;
background-color: #799;
}
#about #header {...} {
background-image: url(../images/lineup.gif);
}
#photos #header {...} {
background-image: url(../images/basshead.gif);
}
#live #header {...} {
background-image: url(../images/bassist.gif);
}
#contact #header {...} {
background-image: url(../images/drummer.gif);
}
#navigation a.here:visited,
#navigation a.here:hover,
#navigation a.here:active {...} {
color: #eef;
background-color: #799;
}
#about #header {...} {
background-image: url(../images/lineup.gif);
}
#photos #header {...} {
background-image: url(../images/basshead.gif);
}
#live #header {...} {
background-image: url(../images/bassist.gif);
}
#contact #header {...} {
background-image: url(../images/drummer.gif);
}
实际应用中使用中文:
<
div
id
="navigation"
>
< ul >
< li >< a href ="index.html" > 主页 </ a ></ li >
< li >< a href ="about.html" > 关于 </ a ></ li >
< li >< a href ="photos.html" > 图片 </ a ></ li >
< li >< a href ="live.html" > 演唱会 </ a ></ li >
< li >< a href ="contact.html" > 留言 </ a ></ li >
</ ul >
</ div >
< ul >
< li >< a href ="index.html" > 主页 </ a ></ li >
< li >< a href ="about.html" > 关于 </ a ></ li >
< li >< a href ="photos.html" > 图片 </ a ></ li >
< li >< a href ="live.html" > 演唱会 </ a ></ li >
< li >< a href ="contact.html" > 留言 </ a ></ li >
</ ul >
</ div >
这就使得添加BODY元素ID的操作失效:
var
linktext
=
links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute( " id " ,linktext);
document.body.setAttribute( " id " ,linktext);
var
linktext
=
split(links[i].getAttribute(
"
href
"
).toLowerCase(),
"
.
"
)[
0
];
document.body.setAttribute( " id " ,linktext);
document.body.setAttribute( " id " ,linktext);
此方法在FireFox下可以正常的工作,但是放到IE中,发现IE将自动为链接添加完整的路径,因为是在本地测试,所以返回的完整路径将会是非常长的。不知道IE在什么情况下才能不这么“活泼”。
最后只好使用其他方法:
switch
(links[i].lastChild.nodeValue)
...
{
case("关于"):
var linktext = "about";
break;
case("图片"):
var linktext = "photos";
break;
case("演唱会"):
var linktext = "live";
break;
case("留言"):
var linktext = "contact";
break;
default:
var linktext = "home";
break;
}
document.body.setAttribute( " id " ,linktext);
case("关于"):
var linktext = "about";
break;
case("图片"):
var linktext = "photos";
break;
case("演唱会"):
var linktext = "live";
break;
case("留言"):
var linktext = "contact";
break;
default:
var linktext = "home";
break;
}
document.body.setAttribute( " id " ,linktext);
但是这样失去了一些灵活性,以后如果修改页面还需要修改脚本。