我希望能够根据我所在的文件更改哪个菜单项处于活动状态。我在我的三个文件中包含 menu.html(下面的文件):a.html、b.html 和 c.html。 如何仅使用 html 和 css 执行此操作? 我使用 Boostrap 菜单。 我基本上想根据我所在的当前文件更改处于活动状态的菜单项。

<ul id="navbar_menu" class="nav nav-tabs nav-justified">
            <li id="a"><a href="#">a</a></li>
            <li id="b"><a href="#">b</a></li>
            <li id="c"><a href="#">c</a></li>   
        </ul>

#1楼 票数:0

据我了解,您正在使用 PHP 包含菜单。

您可以这样做以自动查找当前页面的相关菜单:

在您的 3 个页面中,您将“相关类”添加到作为包装器的 div/section:

<section class="a">
   <!-- your php include for menu-->
</section>

第二页:

<section class="b">
   <!-- your php include for menu-->
</section>

第三页:

<section class="c">
   <!-- your php include for menu-->
</section>

在你的 CSS 中:

.a > li#a {
   /* Active Menu Style */
}
.b > li#b {
   /* Active Menu Style */
}
.c > li#c {
   /* Active Menu Style */
}

这将使用您的 php 包含文件启用当前页面的菜单:

<ul>
    <li id="a"><a href="#">a</a></li>
    <li id="b"><a href="#">b</a></li>
    <li id="c"><a href="#">c</a></li>   
</ul>

#2楼 票数:0

如果我是对的,您应该创建一个活动类并将其添加到实际的活动列表项中。

  ask by Filip Eriksson translate from so

未解决问题?本站智能推荐:

1回复

Bootstrap下拉CSS与其他菜单项冲突

所以我有一个使用Bootstrap的菜单系统,并且基本上是在尝试使下拉菜单项采用以下css样式,这些样式适用于不是下拉菜单的其他菜单项的<li> 。 html ... 下拉菜单是最后的选择。 css样式化所有菜单项,当单击菜单项时,下划线会移动,css如下所示...
4回复

如何将活动的CSS类添加到菜单项?

https://www.bootply.com/XzK3zrPhJJ 在此示例中,为什么“ Home按钮未标记为红色? .navbar a:hover, .navbar a:focus, .navbar a:active { color: red !important; }
4回复

更改引导程序活动菜单项的颜色[关闭]

我想在菜单中更改活动元素的背景颜色。 我已经尝试了很多解决方案,但仍然无法做到这一点。 菜单和CSS: /* MAIN SITE NAVIGATION */ .navbar.navbar-default { font-size: 14px; background-color: #FF
1回复

Bootstrap4:两个菜单一个显示和一个活动菜单项

我有一个很大的菜单,我需要分成的cols移动设备和桌面。 所以我把它放在周围: 问题是我需要它们都作为一个菜单。 从其中任何一项中选择一项应该只显示一个结果和一个活动菜单项。 但是因为我分开了菜单,它们在菜单中显示了两个活动项: 有没有办法让它们都作为一个菜单,即使它们被 div 分隔? 这是 J
1回复

Bootstrap导航栏菜单项溢出

我在导航栏中使用Bootstrap和bootsnip的css http://bootsnipp.com/user/snippets/rVnKg 。 这是JSFiddle链接 - http://jsfiddle.net/ask1987/8xc7fk43/ 请检查JSFiddle链接
2回复

Bootstrap3Navbar菜单项对齐

网站: http : //www.Spotlightdd.co.uk 我有一个导航栏,由于中间的徽标而增加了尺寸。 徽标有一个-margin值,可以将它与底部边框对齐(我知道它只有几个px)。 我想要做的是将文本向下移动而不仅仅增加导航栏的大小,因此它看起来更加集中在导航栏中。 目前,
1回复

单击菜单项后,Bootstrap菜单消失

当浏览器窗口缩小到移动大小时,单击菜单项后,Bootstrap菜单消失,仅在扩展或缩小浏览器窗口后才重新出现。 链接到现场 在Chrome浏览器中检查元素时,我注意到以下html在菜单不可见时消失,在菜单可见时出现。 我还认为模板和/或插件之间可能存在一些冲突,但是插件太多,我不知道
1回复

使用Bootstrap时无法在页面上居中导航栏的菜单项

这是我尝试过的方法。 我希望“信息商店联系人”位于页面顶部。 http://jsfiddle.net/p1ebz2qv/2/ (似乎会有一个padding-left:0来自Bootstrap .nav类吗?)