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来动态设置类，如果它与当前呈现的页面匹配，则输出活动类，否则显然是nav-link类。上面的文件名应替换为自己的php文件名。

Bootstrap 4导航栏活动问题

1 个答案: