html – 突出显示当前页面的导航菜单

前端之家收集整理的这篇文章主要介绍了html – 突出显示当前页面的导航菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在一些带有导航链接页面中,我想要当前页面链接是hightlighted,就像这样:

链接HTML属性”被突出显示(粗体),因为此链接将使用当前页面.

我知道这可以手动实现(只是按照相关的链接,但是有没有一些聪明的方式?动态和自动突出正确的链接

解决方法

您可以将页面正文的id设置为表示当前页面的某个值.然后,对于菜单中的每个元素,您可以设置该菜单项的特定类.在你的CSS中,你可以设置一个规则来突出显示菜单项…

这可能没有什么意义,所以这里有一个例子:

<body id="index">
<div id="menu">
 <ul>
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
 </ul>
</div> <!-- menu -->
</body>

在page1.html中,您可以将主体的ID设置为:id =“page1”.

最后在你的CSS你有如下的东西:

#index #menu .index,#page1 #menu .page1 {
  font-weight: bold;
}

您需要更改每个页面的ID,但CSS保持不变,这一点很重要,因为CSS通常被缓存,并且可能需要强制刷新更新.

它不是动态的,但它是一种简单的方法,您可以使用PHP或类似的方式从模板文件添加菜单html.

原文链接:https://www.f2er.com/html/230438.html

猜你在找的HTML相关文章