如何根据页面将活动引导类放在li元素上

时间:2018-03-19 16:10:05

标签: css html5 laravel bootstrap-4

标题可能看起来很奇怪,但我会尝试简要解释一下......所以在我的管理部分中,我扩展了一个布局,并在每个页面上显示了一个侧边栏作为引导列表。

根据我所在的页面,我想在特定的li上放置一个活跃的课程,但我不确定在Laravel项目中执行此操作的常用方法是什么。

我想过在每一页都放一个js脚本,但那根本不聪明......

所以我想要你的建议,谢谢。

2 个答案:

答案 0 :(得分:1)

我对PHP / Laravel没有太多经验,但我认为最好的方法是获取路线并检查

<li{{ $pageRoute == 'yourPage' ? ' class="active"' : '' }}>

答案 1 :(得分:1)

App文件夹中添加一个帮助文件,创建一个函数来在您的欲望元素中添加类。

您可以按照以下步骤操作:

  1. App文件夹中创建新文件。示例:helpers.php
  2. helpers.php内添加以下代码块:

    function isActive($path, $active = 'active'){
        return call_user_func_array('Request::is', (array)$path) ? $active : '';
    }
    
  3. composer.json中添加文件。每当项目运行时,它都会自动加载helpers.php。在composer.json内添加这些行

    "autoload": {
        ...
        "files": [
            "app/helpers.php" //warning: sometimes filename may case sensitive depending on your server
        ]
    },
    
  4. 然后,转到控制台并运行composer dump-autoload

  5. 现在,您已准备好使用isActive()功能。的exaple:

    <li class="nav-parent {{ isActive('products') }}">
    
  6. 更多提示:

    您可以在isActive()函数中使用通配符,例如isActive('product*')*表示通配符。

    您甚至可以在isActive()函数中传递一系列路由。例如:

    <li class="nav-parent {{ isActive(['*product*','brand*','color*','size*','*categor*']) }}">