如何从父刀片模板中的 HTML 元素更改类答案

【问题标题】：How to change a class from a HTML element in parent blade template如何从父刀片模板中的 HTML 元素更改类
【发布时间】：2018-04-16 00:34:16
【问题描述】：

我对 Laravel 没有那么丰富的经验，所以我为自己创建了一个项目来更好地学习 Laravel 框架。我从一个免费的 HTML 模板开始，并试图把它变成一个 Blade 模板。我有以下内容：

app.blade.php

这包含基本的 HTML 结构和 JS en CSS。除此之外，它还包含以下代码：

<main class="page-content content-wrap">
    @include('layouts.topbar')

    @include('layouts.menu')

    @yield('content')
</main><!-- Page Content -->

topbar.blade.php

这包含模板包含的简单顶栏，对这个问题没有那么有趣。

menu.blade.php

这包含我拥有的所有菜单项。该文件包含整个 menu-div 和所有带有 ul 和 li 的菜单项。在这个文件中，我可以给一个 ul & li 类“活动”，所以它表明你在页面 X 上。标准的 ul（非活动）是类“droplink”，当它处于活动状态时，它被称为“droplink”主动打开”。

网站本身的浏览量

在网站的视图中，我包含 app.blade.php 并在视图中填充内容部分。现在我的问题是，如何更改正确的页面在菜单中显示为活动状态？我的感觉是我无法在 menu.blade.php 中定义它，但我在哪里可以定义呢？

【问题讨论】：

标签： php laravel templates menu blade

【解决方案1】：

将您的路线命名为->name('homepage');

在您的菜单中，您可以使用此示例：

  <li class="{{ isActiveRoute('dashboard') }}">

如果它是活跃的，它将返回'活跃'

使用 css 自定义您的 active 类

编辑

在app/Helpers/Navigation.php中添加辅助函数

  function isActiveRoute($route, $output = 'active')
    {
        if (Route::currentRouteName() == $route) {
            return $output;
        }
    }

为了在任何地方都可以使用它，请将其注册到您的 AppServiceProvider.php

public function register()
    {
    require_once __DIR__ . '/../Http/Helpers/Navigation.php';
}

【讨论】：

感谢您的回复！我试图在我的 menu.blade.php 中应用它，但我得到一个 ErrorException：调用未定义的函数 isActiveRoute()。我必须先在某个地方创建该函数吗？
是的。您需要创建该功能，然后才能工作
感谢您的编辑！我添加了这个功能，它就像一个魅力！非常感谢！

【解决方案2】：

你可以这样做

@if(Route::getCurrentRoute()->uri() == '/') <li class="active"></li> @endif

例如也可以这样使用

<li class="@if(Route::getCurrentRoute()->uri() == '/')active @endif"></li>

要检查其他路线，只需将/ 更改为about-us 或任何您需要的东西。

这将检查当前路线。如果在这种情况下当前路由是/ 或root，它将添加具有活动类的li。你可以把它放在任何你需要的地方。

您可以对'layouts.menu'中的每条路线使用这种方法

【讨论】：

感谢您的回复！正如 Onix 所说，我选择使用 isActiveRoute 函数来获得更简洁的外观。

【解决方案3】：

您可以在menu.blade.php

中查看当前路线

如果它与当前路由匹配，则可以添加活动类。

<a class="{{ str_contains(request()->url(), '/some-page') ? 'active' : '' }}" href="/some-page">Some Page</a>

【讨论】：

感谢您的回复！所以，如果我理解正确，我必须检查路线是否与每个菜单项的菜单项匹配，然后将类更改为活动？
是的，您需要检查每个菜单项
您可以为每个菜单添加条件。它将根据路由添加活动类。
感谢您的回复！正如 Onix 所说，我选择使用 isActiveRoute 函数来获得更简洁的外观。