Highlighting the Current Page in a Navigating Bar

最新推荐文章于 2025-12-11 18:00:04 发布

原创最新推荐文章于 2025-12-11 18:00:04 发布 · 629 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #电话 #div #web

本文介绍了一种利用CSS选择器来高亮显示当前激活菜单项的方法，通过简单修改body标签的ID属性即可轻松实现导航栏中当前所处位置的视觉强调。

(昨晚10点半还打电话跟jeff问这个问题...)

在做web页面的时候, 经常需要使用ul来做一些导航菜单. 出于易用的考虑, 需要把菜单中, 和当前位置对应的菜单项突出显示.

这样, 可能会要求我们在展示界面的时候进行无数次判断.

昨天想到一个用CSS的解决办法, 也恰好在"CSS Mastery"这本书里找到.

Html代码:

<body id="home"> 
    <ul id="mainNav"> 
        <li class="home"><a href="#">Home</a></li> 
        <li class="about"><a href="#">About</a></li> 
        <li class="news"><a href="#">News</a></li> 
        <li class="products"><a href="#">Products</a></li> 
        <li class="services"><a href="#">Services</a></li> 
    </ul> 
</body> 

CSS:

#home #mainNav .home a, 
#about #mainNav .about a , 
#news #mainNav .news a, 
#products #mainNav .products a, 
#services #mainNav .services a { 
    background-position: right bottom; 
    color: #fff;  
} 

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

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

<body>
<div id="mainNav">            
    <ul  id="home"> 
        <li class="home"><a href="#">Home</a></li> 
        <li class="about"><a href="#">About</a></li> 
        <li class="news"><a href="#">News</a></li> 
        <li class="products"><a href="#">Products</a></li> 
        <li class="services"><a href="#">Services</a></li> 
    </ul>
</div>
</body> 

#home .home a, 
#about .about a , 
#news .news a, 
#products .products a, 
#services  .services a { 
background-position: right bottom; 
color: #fff; 
} 

这样更干脆一点.