当前位置：首页 >> 经验分享 >> 正文

在导航条中突出显示当前页面

来源:www.w3c2.com 本站时间:07-11-24 点击数:

我们以外的做法是是由一个单独的类或ID来表示当前页面，对于在页面中嵌入导航的小站点，只需要逐个页面地添加这个类或ID。但是对于大型站点，导航很可能是动态建立的，在这种情况下可以在后端添加类，但是，对于主导航不改变的中等规模的站点，往往通过外部文件包含导航。在这些情况下，如果有办法突出显示当前页面，而不需要动态的在菜单中添加类或ID，那么不是很棒吗？

那么如何使用CSS实现这种效果呢？

我们现来理清这个概念的工作方式。在每个页面的主题元素中添加一个ID或类名，从而指出用户当前在哪个页面或部分中。然后，在导航列表中的每个项中添加一个对应的ID或类名。可以使用主题的ID或列表ID/类的惟一组合在站点导航中突出显示当前部分或页面。

以下面的HTML片段为例。当前页面是主页，这由主题上的ID home表示。主导航中的每个列表项被分配一个类名，这个类名基于列表项相关联的页面的名称：
<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>
</ul>
</body>

为了突出显示当前页面，只需寻找以下ID和类名的组合：
#home #mainNav .home a,#about #mainNav .about a,#news #mainNav .news a {
background-position:right bottom; /*以下部分可根据自己的实际情况来设定*/
color:#333;
cursor:default;
}

当用户在主页上时，具有 home 类的导航项将显示被选择状态；在新闻页面上，具有 news 类的导航项将显示被选择状态。为了增加效果，我将鼠标样式改为显示默认的箭头光标。这样的话，如果当鼠标经过被选择的链接，那么光标不会改变状态，因此不会诱使用户单击当前页面的链接。

当然可根据自己的需求来显示当前页面的样式。

loading... 免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。
对本文有任何异议，请联络：cipin@163.com 转载要求：作者及来源信息必需保留。转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印。

热点经验

在导航条中突出显示当前页面

来源:www.w3c2.com 本站 时间:07-11-24 点击数:

热点经验

热门排行

来源:www.w3c2.com 本站时间:07-11-24 点击数: