Bootstrap 4 导航栏活动问题

Question

我正在使用Laravel 5.5，我想构建一个单一的布局，但我不能做我想做的事。 所以这就是我使用Bootstrap 4 并复制这样的示例导航栏的问题（代码如下）

<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" href="{{url('/')}}">News</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{{url('/laptops')}}">Sports</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{{url('/pc')}}">Science</a>
              </li>
            </ul>
          </nav>

事情是当我改变我的目录时，活动状态不会切换，有什么方法可以工作吗？

PS：我看到类似这样的其他问题，但 href 标签定位的是 ID 属性而不是 link 目录

Answer 1

您在这里所做的是将活动类设置为导航栏的一个元素。您需要的是在访问相应链接时会动态更改活动类的东西。一个简单的例子是

<li <?=activeClass("index")?>>
    <a class = "nav-link" href="{{url('/')}}">News</a>
</li>
<li <?=activeClass("laptop")?>>
    <a class = "nav-link" href="{{url('/laptops')}}">Sports</a>
</li>
<li <?=activeClass("pc")?>>
    <a class = "nav-link" href="{{url('/pc')}}">Science</a>
</li>

和php函数

<?php 

function activeClass($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri){
        echo 'class="nav-item active"';
    }
    else{
        echo 'class ="nav-item"';
    }
}
?>

所以基本上我在这里所做的是我通过比较传入的请求 uri 动态设置类，如果它与当前呈现的页面匹配，则输出活动类，否则明显的导航链接类。上面的文件名应该替换为你的自己的 php 文件名。