动态更改 div 值，laravel blade 上的导航栏

Question

我目前正在使用 laravel blade 并且我目前正在实施 bootstrap 以及 blade 模板。

希望导航按钮能够与所选页面动态交互

<div class="navbar">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                  <a class="navbar-brand" href="#"><b>iMakan</b></a>
           </div>
    <div>
  <ul class="nav navbar-nav navbar-right">
    <li><a class="active "href="/">Home</a></li>
    <li><a href="about">About Us</a></li>
    <li><a href="contact">Contact Us</a></li>
    <li><a href="auth/login">Login</a></li>
    <li><a href="503">Cart</a></li>
  </ul>
</div>
</div>
</nav>
</div>

Answer 1

这是我的做法，你也应该遵循这个

如果您有 url 的最后一部分，例如 home 用于主页，aboutus 用于关于我们，那么您可以这样做

第 1 步：

获取请求 URI

$_SERVER['REQUEST_URI']

第 2 步：

在你的内心class你可以有这种情况

<?php if ($_SERVER['REQUEST_URI']=='/') { echo 'active'; } ?>

所以你将拥有

<li><a href="about" class='<?php if ($_SERVER['REQUEST_URI']=='/') { echo 'active'; } ?>' >About Us</a></li>

条件会根据你的uri回显active

所以你会得到这样的东西

<ul class="nav navbar-nav navbar-right">
    <li><a class="<?php if ($_SERVER['REQUEST_URI']=='/') { echo 'active'; } ?>" href="/">Home</a></li>
    <li><a class='<?php if ($_SERVER['REQUEST_URI']=='/aboutus') { echo 'active'; } ?>'href="about" >About Us</a></li>
    <li><a class='<?php if ($_SERVER['REQUEST_URI']=='/contactus') { echo 'active'; } ?>'href="contact">Contact Us</a></li>
    <li><a class='<?php if ($_SERVER['REQUEST_URI']=='/login') { echo 'active'; } ?>' href="auth/login">Login</a></li>
    <li><a class='<?php if ($_SERVER['REQUEST_URI']=='/cart') { echo 'active'; } ?>' href="503">Cart</a></li>
  </ul>

然后你会根据你的url得到class='active'。

希望对您有所帮助。

Answer 2

有一个 package 你可以使用，但只使用 laravel 提供的，我建议如下：

<a href="{{ URL::route('home') }}" 
   class="{{ Route::current()->getName() === 'home' ? : 'active' : ''">Home</a>

使用URL::route(...) 将根据路由名称创建一个URL，您可以通过providec 检查检查当前是否使用此名称。要命名路线，请阅读 laravel documentation about routing.

Answer 3

Laravel 提供了一个你可以使用的内置函数：Request::is().

来自API docs：

Determine if the current request URI matches a pattern.

你使用的是这样的：

Request::is('about'); // returns a boolean

<a href="about" @if(Request::is('about')) class="active" @endif>

您可以编写一个辅助函数来处理它：

function isActive($path, $class = 'active')
{
    return (Request::is($path)) ? $class : '';
}

将其放入 app 目录中名为 helpers.php 的文件中，并将其包含在 composer.json 的自动加载部分中，如下所示：

"autoload": {
    "files": [
        "app/helpers.php"
    ]
},

也许您需要在终端中执行 composer dump-autoload。

最后像这样使用它：

<a href="about" class="{{ isActive('about') }}">About</a>

动态更改 div 值，laravel blade 上的导航栏

Changing div value dynamically, navigation bar on laravel blade

php

navigation

laravel

blade