Highlighting the Current Page in a Navigating Bar

(昨晚10点半还打电话跟jeff问这个问题...)
在做web页面的时候, 经常需要使用ul来做一些导航菜单.  出于易用的考虑, 需要把菜单中, 和当前位置对应的菜单项突出显示. 
这样, 可能会要求我们在展示界面的时候进行无数次判断.
昨天想到一个用CSS的解决办法, 也恰好在"CSS Mastery"这本书里找到. 

Html代码:
  1. <body id="home"> 
  2.     <ul id="mainNav"> 
  3.         <li class="home"><a href="#">Home</a></li> 
  4.         <li class="about"><a href="#">About</a></li> 
  5.         <li class="news"><a href="#">News</a></li> 
  6.         <li class="products"><a href="#">Products</a></li> 
  7.         <li class="services"><a href="#">Services</a></li> 
  8.     </ul> 
  9. </body> 
CSS:
  1. #home #mainNav .home a, 
  2. #about #mainNav .about a , 
  3. #news #mainNav .news a, 
  4. #products #mainNav .products a, 
  5. #services #mainNav .services a { 
  6.     background-positionright bottom
  7.     color#fff;  

这样, 我们只需要改变body的id属性值, 就可以改变当前菜单项的css了.

进一步想, 为什么中间要加一个#mainNav呢.不如去掉:

  1. <body>
  2. <div id="mainNav">            
  3.     <ul  id="home"> 
  4.         <li class="home"><a href="#">Home</a></li> 
  5.         <li class="about"><a href="#">About</a></li> 
  6.         <li class="news"><a href="#">News</a></li> 
  7.         <li class="products"><a href="#">Products</a></li> 
  8.         <li class="services"><a href="#">Services</a></li> 
  9.     </ul>
  10. </div>
  11. </body> 
  1. #home .home a, 
  2. #about .about a , 
  3. #news .news a, 
  4. #products .products a, 
  5. #services  .services a { 
  6. background-positionright bottom
  7. color#fff

这样更干脆一点.





你可能感兴趣的:(Highlighting the Current Page in a Navigating Bar)