Laravel Blade 更改 Active Class Bootstrap

Question

当我使用 Laravel Blade 模板访问另一个页面时，如何更改 twitter bootstrap 中的活动类？

Answer 1

这是一个可能有帮助的示例

您可以在刀片模板中定义变量

 <?php $nav_profile = 'active'; ?>

    @extends ('layouts.app')

    @section ('content')
..
..
    @endsection

然后在布局文件中；

<ul class="nav nav-tabs">
    <li role="presentation" class="{{ $nav_home or ''  }}"><a href="#">Home</a></li>
     <li role="presentation" class="{{ $nav_profile or ''  }}"><a href="#">Profile</a></li>
     <li role="presentation" class="{{ $nav_messages or '' }}"><a href="#">Messages</a></li>
</ul>

因此，如果页面包含一个名为 nav_profile 的变量，则将“active”插入到该类中。如果变量不存在，“或”部分将插入一个空字符串。

Answer 2

我找到了解决这个问题的简单方法。这个解决方案有非常简单的技巧。

它将适用于整个页面的所有链接。

<script>
  function addActiveClass(){
    var objs = document.getElementsByTagName('a');          // take all 'a' tags
    for(var i = 0; i < objs.length; i++){
      if(objs[i].href == window.location.href){             // check if the user is on this link
        objs[i].className = objs[i].className + " active";  // add additional 'active' class
      }
    }
  }

  addActiveClass();
</script>

将此代码添加到页面末尾将会发挥神奇作用。

Answer 3

感谢Active package，这些天你可以简单地这样做：

class="@active('home')"

它还有很多其他选项，例如通配符激活。例如如果你想激活管理面板的所有路由，你可以这样做：

class="@active('admin.*')"