很多朋友在做网站的时候可能遇到这样一个问题，如何高亮导航当前页链接
以育儿网新版导航条来举例
大家可以看到“首页”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>
刚好前台区有人问了个类似的问题
http://bbs.blueidea.com/thread-2839114-1-1.html
没时间详解，自己先理解下
http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
10.6.1 Inline, non-replaced elements
The 'height' property doesn't apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)
Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.
The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, not the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.
If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. Note that this may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.
简单的说就是：行内非替换元素的在文档流中的占位高度取决于行高“line-height”，
而其垂直方向的padding, border and margin 是基于其内容的区域——这里即文本框（文字本身）
而CSS2规范却在这里留下了悬疑：
10.6.1 行内的非替换元素
如果'top'，'bottom'，'margin-top'或'margin-bottom'为'auto'，它们的计算值为0。'height'属性并不适用，但是框的高度由'line-height'属性给出。
10.6.2 ……
来源 http://bbs.blueidea.com/thread-2839096-1-1.html
总结： 实际就是PADDING的 上下高度并不在文档流的垂直方向占有宽度，导致其物理的占位位置关系无变化，所以，视觉上的位置感觉不出移动，但是其本身理论位置还是 增加了的，从A连接区域可以看出来。其垂直位置的占位高度由本身的行高控制和决定。
水平位置 可以设置PADDING的。
