a标签,padding的
用zoom:1;触发ie
很多朋友在做网站的时候可能遇到这样一个问题，如何高亮导航当前页链接
以育儿网新版导航条来举例
大家可以看到“首页”2个字做了高亮处理。
<div id=”navi”>
<ul>
<li><a target=”_blank” title=”首页” href=”http://www.ci123.com/” class=”on” ><span>首页</span></a></li>
<li><a target=”_blank” title=”父母学堂” href=”http://www.ci123.com/index1.html”><span>父母学堂</span></a></li>
<li><a target=”_blank” title=”育儿论坛” href=”http://bbs.ci123.com”><span>育儿论坛</span></a></li>
<li><a target=”_blank” title=”宝宝主页” href=”http://baobao.ci123.com”><span>宝宝主页</span></a></li>
<li><a target=”_blank” title=”育儿博客” href=”http://blog.ci123.com”><span>育儿博客</span></a></li>
<li><a target=”_blank” title=”育儿问答” href=”http://ask.ci123.com”><span>育儿问答</span></a></li>
<li><a target=”_blank” title=”许愿树” href=”http://tree.ci123.com”><span>许愿树</span></a></li>
<li><a target=”_blank” title=”亲子资源” href=”http://rs.ci123.com”><span>亲子资源</span></a></li>
<li><a target=”_blank” title=”城市伙伴” href=”http://www.ci123.com/baodian”><span>育儿宝典</span></a></li>
<li class=”end”><a target=”_blank” title=”活动吧” href=”http://www.ci123.com/huod-bar.html”><span>活动吧</span></a></li>
</ul>
</div>
蓝色加下划线的地方，就是用来区别“首页”这个链接和其它链接的不同样式的class。
#navi li a.on,#navi li a:hover{
background: url(images/navi.gif) top left no-repeat;
color: Red;
}#navi li a.on span,#navi li a:hover span{
background: url(images/navi.gif);
background-position: right 25px;
padding-top: 2px;
}a 里面的 span 标签是为了实现滑动门效果的。具体可以看CSS滑动门技术这篇文章。下面继续。如果是单个页面，设置这样的效果只要按上面的方法，在需要高亮度链接标识出特定的class就可以了。但在大型网站中，因为频道和页面众多，如果每个频道的头部都为此单独去做一个只是高亮部位不同的文件，那维护起来必然是非常繁琐的。因此，我们将头部分离出来，放入服务器单独的目录，再让各个频道去引用这个单独的文件。这样在维护的时候，就可以一次修改。多次使用。具体引用的方式在不同的语言和架构上有不同的方法，这个和我们要说的东西又是另一回事。回到这里，如果是引用的同一个头部文件，那么就没有办法给每个链接区按一个class，那又如何按频道高亮呢。下面有个函数：function highlightPage(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(’navi’)) return false;
var nav = document.getElementById(’navi’);
var links = nav.getElementsByTagName(’a');
for (var i=0;i<links.length;i++){
var linkurl = links[i].getAttribute(’href’);
var currenturl = document.location.href;
if(currenturl.indexOf(linkurl)!=-1){
links[i].className = ’on’;
return true;
}
}
}这个js的前三行，是用于判断dom上的节点是否能取到，以及浏览器对document.getElementsById方法的支持程度。
到了第三行开始，建立了一个 nav的变量，并给它赋值document.getElementById(’navi’)。
navi是唯一的。而它下面的诸多a 标签，用links[]这个数组再进行赋值。
赋值完成后，就开始遍历。一遍links的数组，每遍历一个数组成员，都用 links[i].getAttribute(’href’) 将这个成员的’href’属性值取出，放入临时变量linkurl,同时用l将页面当前的地址也取出放入currenturl这个变量。
如http://www.ci123.com/ 因为基本网页的实际地址长度都会大于页面代码href的里面所写的路径，所以我们用indexOf这个方法来判断 currenturl 里面是否包含 linkurl的字符串，如果结果为true,我们就给这个链接的className赋值’on’ 设定它为当前链接。然后返回。
这样开头的那个高亮效果就实现了。
-----------------------------------------------------------------------------------------------
<script>
function addloadEvent(fun){
var olonload=window.onload;
if(typeof window.onload!='function'){
window.onload=fun;
}else{
window.onload=function(){
olonload();
fun();
}
}
}
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){
var a=linkurl.lastIndexOf("/")+1
var b=linkurl.lastIndexOf(".")
var c=linkurl.substring(a, b)
links[i].className=c;
}
}
}
addloadEvent(highlightpage);
</script>
<style>
a.nava:{}
a.navb:visited{color:red}
a.navc:{}
a.navd:{}
</style>
<div id="navigation">
<ul>
<li><a href="nava.htm">111</a></li>
<li><a href="navb.htm">222</a></li>
<li><a href="navc.htm">333</a></li>
<li><a href="navd.htm">444</a></li>
</ul>
</div>
