武冈论坛官方博客

  js+css结合高亮导航当前页链接

  很多朋友在做网站的时候可能遇到这样一个问题，如何高亮导航当前页链接 
  以育儿网新版导航条来举例
  大家可以看到“首页”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的。

  :hover伪类在IE6中的BUG
  :hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。
  
  或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：
  
  在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。
  
  在 CSS2 中此伪类可以应用于任何对象。但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。
  
  当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
  
  或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
  
  我们先用 CSS2 的写法来实现：
  
  XHTML部分：
  
  <ul>
  <li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
  </ul>
  CSS部分：
  
  *{
  margin:0;
  padding:0;
  }
  ul{
  list-style:none;
  margin:100px;
  }
  li{
  height:100px;
  width:100px;
  background:#000;
  font-size:12px;
  color:#fff;
  position:relative;
  }li a{
  display:none;
  }
  li:hover a{
  display:block;
  text-decoration:none;
  width:100px;
  height:100px;
  background:#c00;
  position:absolute;
  top:50px;
  left:50px;
  color:#fff;
  }
  大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中，可以显示我们所要达到的效果，但在 IE6 中却无法实现。
  
  下面让我们换一种思维，所用 CSS1 的写法来看看，这个时候由于无法支持 li 元素 :hover 的使用，我们只好把所有文字包含到 a 中，对 a 使用 :hover ，并且将要显示隐藏的部分放到 span 元素中，首先我们对 XHTML 进行部分调整，调整如下：
  
  XHTML部分：
  
  <ul>
  <li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
  </ul>
  CSS 中我们将 a 的设置成块级元素，并使 a 的大小和宽度和 li 的相同，并设置 a 为相对位置，用 a 来模拟上例中的 li ；而用 span 来模拟上例中的 a ，设置 span在默认情况下隐藏（display:none;），当 a 被触发时（:hover），则 span 显示（display:block;）
  
  CSS部分：
  
  *{
  margin:0;
  padding:0;
  }
  ul{
  list-style:none;
  margin:100px;
  }
  li{
  height:100px;
  width:100px;
  background:#000;
  font-size:12px;
  }
  li a{
  display:block;
  height:100px;
  width:100px;
  position:relative;
  color:#fff;
  text-decoration:none;
  }
  li span{
  display:none;
  }
  li a:hover span{
  display:block;
  width:100px;
  height:100px;
  background:#c00;
  position:absolute;
  top:50px;
  left:50px;
  color:#fff;
  }
  可我们发现上例中的效果，在 IE6 中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是 IE6 浏览器连 CSS1 也不支持？很多疑问从四面八方跑来了……
  
  那到底是什么问题呢？
  
  不是标准说明的错，也不是 IE 浏览器不支持 CSS1，而是 IE 浏览器自身解析的问题，是 IE5.5 和 IE6 中伪类:hover 的 BUG。
  
  那又该如何解决这个问题呢？
  
  这个 BUG 可以通过在链接的属性中增加某些特殊的 CSS 属性声明来消除。
  
  下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些 BUG。
  
  对 CSS 代码我们增加：
  
  li a:hover {}对其属性我们仅设定 width:100px; 发现在 IE6 中依旧没有变化，我们尝试着更改 width 的 value ，比如使其 width:99px，奇怪的事情发生了，在 IE6 中，隐藏的部分在触发的时候显示出来了。我们再对 li a:hover 的属性仅设定 color 来测试（初始值为 #fff），更改 color 值，发现在 IE6 下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！
  
  我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。
  
  我们发现除了 text-decoration，color，z-index 不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类 :hover BUG 的特定属性。
  
  说明：
  
  对于 dispaly 不可以用本例来测试，可另外写个更简单的例子（去除 ul/li，a和span中的position ）。在实际应用中怿飞不建议改变 display 值来做为特定属性消除此 BUG，而且在某些例子中此属性不一定能消除 BUG。
  对于做为特定属性的 border 和 background 中的颜色我们还可用全写和简写来改变，如 #fff 和 #ffffff 在消除 BUG 中解析为 2 个不同的值。
  
  文章转摘自：PlanABC - 怿飞’s Blog
  
  原文地址：http://www.planabc.net/2007/02/15/ie_hover_bug/

  浮动引起的文本重影

  在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题，一般来说这类问题在IE6中表现的比较多，但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题，但此时的页面却是没有任何注释～，持续地测试分析问题变得越来越有趣了…
  
  
  测试结果为当不适当地使用float:left/right; width:100%; display:none;CSS属性值及相应的HTML结构做组合，会引发在IE中的七种怪异问题，此问题在中文及英文字体均会出现。详细如下例：
  阅读约定：
  cont1是指：<p class=”cont1″>ABCDEFG</p>
  cont2是指：<p class=”cont2″>1234567</p>
  一、相等长度的文本消失在IE6中，cont1与cont2字符长度相同时，文本会消失，且容易引起浏览器IE6崩溃。
  
  但改变浏览器窗口尺寸时内容会再次显示。
  注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
  DEMO：http://blog.gulu77.com/demo/200908/float/a1.html
  
  
  
  二、当浏览器宽度少于内容宽度文本会消失在IE6中，当浏览器宽度少于内容宽度文本会消失，且容易引起浏览器崩溃。
  但改变浏览器窗口尺寸时内容会再次显示。
  注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
  DEMO：http://blog.gulu77.com/demo/200908/float/a2.html
  
  
  
  三、相等长度文本重影在IE6中，cont2比cont1多出一个字符时，内容会被重映为相等长度的文本，且容易引起浏览器IE6崩溃。
  DEMO：http://blog.gulu77.com/demo/200908/float/b1.html
  
  
  
  四、当浏览器宽度少于内容宽度文本会重影在IE6中，cont2比cont1多出一个字符时,且浏览器宽度拉伸至小于内容宽度文本会完全重影。
  
  此问题与第三个对比在于一个不需要拉伸，一个需要拉伸。
  DEMO：http://blog.gulu77.com/demo/200908/float/b2.html
  
  
  
  五、文本的倒序重影在IE6中，cont2比cont1多出两个字符或以上时文本会被倒序重影，且容易引起浏览器IE6崩溃。
  规律为:重影字符数 = cont1的字符数 + 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/c1.html
  
  
  
  六、内联元素引起的文本重影在IE6中，浮动元素之间有不含内容的内联元素的标签（指内联标签或CSS模拟的内联标签）后会引起文本重影。
  规律为:重影字符数 = 内联元素数量 * 2字符数 – 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/d1.html
  
  
  
  七、内联元素引起的IE6/7文本重影与消失与第六的《内联元素引起的文本重影》类似，但在cont2后面添加了一个内联元素后会导致IE7也出现重影BUG。
  而内联元素相加超出cont2字符数时，IE7表现正常，IE6则表现为消失。
  规律为:重影字符数 = <span>数量 * 2字符数 – 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/e1.html
  
  而内联元素相加超出cont2字符数时，IE7表现正常，IE6则表现为消失。
  注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
  规律为:重影字符数 = <span>数量 * 2字符数 – 1个字符数
  DEMO：http://blog.gulu77.com/demo/200908/float/e2.html
  
  
  
  总结围绕着float加width列出的种种问题，下面列举一些解决的方法，也期待分享你的解决方案，在此不胜感谢：
  

    
•       避免float:left/right;与width:100%;同时使用。
    
•       对于例子中的display:none;可以使用visibility:hidden;代替。
    
•       尽量减少使用float进行布局，从目前的经验看来float是种种奇怪问题的根源所在。
  

  大多数人可能认为,设置元素的vertical-align:middle可以让行内元素在父元素中垂直居中,但在网页开发中发现不是这样,我最近参考了w3c的标准发现,middle值会把行内元素框的中与与父元素基线上方0.5ex处的一个点对齐,这里的1ex也是相对于父元素定义. 以下是制作的一个图,供大家了解.