1
votes

Laravel - Ajouter une classe à n'importe quel lien de navigation si son URL générée correspond à l'itinéraire actuel

Je travaille avec Bootsrtap 4 et j'essaye d'ajouter la classe active à mes éléments nav-item chaque fois leur nav L'attribut -link href est le même que l'url actuelle.

Du côté html, j'ai utilisé un générateur d'URL basique comme indiqué ci-dessous:

$('.navbar-nav .nav-item .nav-link').each( () => {
    // If the current path and the link url are the same...
    if ($(this).attr('href').indexOf(location.pathname) !== 1) {
        // ...then add the class 'active' to 'nav-item', its parent
        $(this).parent().addClass('active')
    }
})

Et puis j'ai utilisé une méthode jQuery pour les comparer avec l'url actuelle:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="{{ url('/brands') }}" role="button">Brands</a>
    </li>

    <!-- ... -->
</ul>

Cependant , j'ai remarqué que $ (this ) .attr ('href') était indéfini , probablement parce que c'est une URL générée, et donc nav-item ne rend pas le actif class.

EDIT: à titre d'exemple, pour l'instant c'est une url très basique, sans paramètre, qui ressemble à ceci: http: //domain.example/brands

Est-ce Quelqu'un sait comment résoudre ce problème? Merci d'avance.

html css bootstrap-4 laravel-5

2 commentaires

Pouvez-vous donner un exemple pour l'une de ces URL générées? Cela vaut peut-être la peine d'opter pour des expressions régulières.

Pour faire correspondre ma réponse correctement à votre question, vous devez l'adapter. Vous demandez de l'aide pour un problème spécifique à jQuery. Au moins ce n'était pas votre problème, si j'ai bien compris. Vous vouliez que les liens de style dans votre navigation soient basculés dès que l'itinéraire actuel correspond. D'autres pourraient se plaindre que ma réponse ne correspond pas à votre question. Si vous avez besoin d'aide, demandez-la simplement.

3 Réponses :

2
votes

Je vous recommande d'aller autrement. Au lieu d '"activer" le lien avec jQuery, vous pouvez facilement le faire côté serveur avec Laravel:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="{{ Request::is('brands*') ? 'nav-link active' : 'nav-link' }}"
           href="{{ url('/brands') }}" 
           role="button">Brands</a>
    </li>

    <!-- ... -->
</ul>

Explication :

Laravel utilise la brindille du moteur de template pour rendre le HTML côté serveur. Au lieu de manipuler le côté client DOM, vous pouvez facilement ajouter un conditionnel pour vérifier les paramètres de requête actuels. Laravel vous donne nativeliy la possibilité de vérifier le chemin de la requête même avec un caractère générique.

0 commentaires

0
votes

D'accord, c'est ce que je fais généralement dans tous mes projets laravel quand il s'agit de rendre la barre latérale ou tout lien "actif" au clic: -

<?php

namespace App\Helpers;

use Route;
class BladePageHelper
{
    public static function sideBar_link_isActive($selectedLink){
        $currentRouteName = Route::currentRouteName();
        if($selectedLink === $currentRouteName){
            return 'active';
        }else{
            return '';
        }
    }
}

Maintenant remarquez ceci { {BladeHelper :: sideBar_link_isActive ('admin.dashboard')}}

J'ai créé une fonction d'assistance dynamique pour obtenir l'url actuelle et renvoyer la classe "active"

Chemin: app \ Helpers \ BladePageHelper

<li class="nav-item {{ in_array(Route::currentRouteName(),[
            'admin.dashboard',
            'admin.updates',
        ])? 'active show' : ''}}">
          <a href="" class="nav-link with-sub"><i class="typcn typcn-clipboard"></i>Dashboard</a>
          <nav class="nav-sub">
            <a href="{{ route('admin.dashboard') }}" class="nav-sub-link {{  BladeHelper::sideBar_link_isActive('admin.dashboard') }}">Home</a>
          </nav>
</li>

J'utilise le nom de la route ici comme

Route: :( "/", "MyController @ mymethod ") -> name (" myname ")

Vous pouvez également le faire avec l'URL.

J'espère que cela vous aidera.

Codage heureux

0 commentaires

0
votes

Votre problème est probablement dû à la différence entre l'utilisation de () => {} ou de function () {} Lorsque vous utilisez la syntaxe de la flèche, le prop this n'est pas lié. Cela signifie que $ (this) renverra également un objet jQuery vide au lieu de renvoyer l'ancre. Tout chaînage jQuery de suivi renverra quelque chose de vide / indéfini.

Ainsi, remplacer .each (() => { par .each (function () {) résoudra au moins votre problème indéfini.

Informations sur la syntaxe des flèches: https: / /developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

0 commentaires