导航栏中的活动链接不起作用答案

【问题标题】：Active link in navbar not working导航栏中的活动链接不起作用
【发布时间】：2018-03-21 14:33:46
【问题描述】：

所以，我想在导航栏中创建一个活动链接，但它仅适用于“Pocetna”页面，但不适用于其他页面......这就是我所做的：

<nav>
    <ul>
        <a href="#"><li class="active">Pocetna</li></a>
        <a href="#"><li>Forum</li></a>
        <a href="#"><li>Galerija</li></a>
        <a href="#"><li>Donacije</li></a>
        <a href="#"><li>O nama</li></a>
    </ul>
</nav>

这是在我的 style.css 中：

nav li.active{
    color: #CCCCCC;
}

我正在使用引导程序...

【问题讨论】：

您需要类 active 才能移动到每个页面的相关 li。您可以手动或以编程方式完成。
@ovokuro 有什么例子吗？
最简单的解决方案是将class="active" 属性移动到相关的li，具体取决于您所在的页面。
由于您使用的是 Bootstrap，如果 active 类在 <li> 元素中发生变化，请检查开发工具，并且我没有看到任何其他 Bootstrap 类，或者移动类取决于你在哪个页面
首先更正您的 html 标记。将a 标签放在li 标签内。可能这会对您有所帮助：stackoverflow.com/questions/24514717/…

标签： css twitter-bootstrap navbar

【解决方案1】：

您是否为每个导航链接创建了 HTML 文件？

如果你这样做了，请执行以下操作：

1.转到您的“论坛”HTML 索引文件，并将导航栏更改为：

<nav>
  <ul>
    <a href="#"><li>Pocetna</li></a>
    <a href="#"><li class="active">Forum</li></a>
    <a href="#"><li>Galerija</li></a>
    <a href="#"><li>Donacije</li></a>
    <a href="#"><li>O nama</li></a>
  </ul>
</nav>

2。然后转到您的“Galerija”HTML 索引文件，并将导航栏更改为：

<nav>
  <ul>
    <a href="#"><li>Pocetna</li></a>
    <a href="#"><li>Forum</li></a>
    <a href="#"><li class="active">Galerija</li></a>
    <a href="#"><li>Donacije</li></a>
    <a href="#"><li>O nama</li></a>
  </ul>
</nav>

你明白我的意思吗？您只需将class="active" 添加到您的活动 HTML 索引文件中。

除非您希望更改导航栏链接的活动颜色，否则请勿触摸 CSS。

【讨论】：