Así que tengo un encabezado en site.blade.php y agregué una clase activa para que el usuario pueda saber en qué página se encuentra. Pero, como el encabezado es el mismo para cada página, no sé cómo cambiar la clase activo de un elemento a otro dependiendo de qué página sea el usuario.

Demostración básica del encabezado

<li class="active"> <a href="{{ url('') }}">Home</a> </li>

<li> <a href="{{ url('blog') }}">Blog</a> </li>

La clase es esa, pero cuando voy a la página del blog, quiero eliminar la clase activa de casa y agregarla al blog.

¿Alguna ayuda?

1
Miguel Leal 12 sep. 2019 a las 18:12

3 respuestas

La mejor respuesta

Puedes usar el método is() de esta manera:

<li class="{{Request::is('/')?'active':''}}"> <a href="{{ url('') }}">Home</a> </li>
<li> <a class="{{Request::is('blog')?'active':''}}" href="{{ url('blog') }}">Blog</a> </li>
1
MaartenDev 12 sep. 2019 a las 18:08

Puede pasar la variable $ currentPage a una vista en cada método de controlador y, en el encabezado, hacer algo como esto:

<li class="{{ $currentPage=='home' ? 'active' : '' }}"> <a href="{{ url('') }}">Home</a> </li>

<li class="{{ $currentPage=='blog' ? 'active' : '' }}"> <a href="{{ url('blog') }}">Blog</a> </li>

Su controlador:

return view("blog", ["currentPage"=>'blog']); // do the same for home

De esta manera, el operador ternario agrega la clase 'activo' solo cuando se encuentra en la página correcta.

0
failedCoder 12 sep. 2019 a las 15:26

Le recomendaría que use rutas con nombre y configure una función auxiliar. Esto ayudará a mantener limpia su navegación.

ejemplos de rutas con nombre

Route::get('/','HomeController@index')->name('home');
Route::get('/blog','BlogController@index')->name('blog.index');
Route::get('/blog/{blog}','BlogController@show')->name('blog.show');

función auxiliar de muestra

if (!function_exists('isActiveRoute'))
{
    /**
     * Asserts active route
     *
     * @param $routes
     * @param string $output
     * @return string
     */
    function isActiveRoute($routes, $output = 'active')
    {
        foreach ((array)$routes as $route) {
            if (Route::currentRouteName() == $route) {
                return $output;
            }
        }
    }
}

muestra de navegación de hoja

<li class="{{ isActiveRoute('home') }}"> <a href="{{ route('home') }}">Home</a> </li>
<li class="{{ isActiveRoute('blog.index') }}"><a href="{{ route('blog.index') }}">Blog</a> </li>

// Or pass an array of routes if named accordingly

<li class="{{ isActiveRoute(['blog.index','blog.show']) }}"><a href="{{ route('blog.index') }}">Blog</a> </li>
0
matticustard 12 sep. 2019 a las 15:26