Ajouter une classe de navigation active basée sur une URL pour une URL similaire

coder l'amour

J'essaie d'ajouter une classe active dans la navigation. J'ai utilisé cet article. Ajouter une classe de navigation active basée sur l'URL

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

Cela a bien fonctionné. Mais mon problème est dans ce cas.

/blog, /blogAds

Si l'url est /blog,active, la classe est ajoutée aux deux éléments de navigation. Y a-t-il une solution pour cela?

lien versahref

Essaye ça

if( new RegExp(location.pathname + "$").test( $this.attr('href') ) ) {
    $this.addClass('active');
}

Testé avec :

new RegExp('\/blog$').test('/blogAds'); // returns false
new RegExp('\/blog$').test('/blog'); // returns true

Référence

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

Ajouter une classe de navigation active basée sur l'URL

Besoin d'aide pour ajouter et supprimer une classe .active basée sur l'URL de la page à l'aide de JS

jQuery ajouter une classe basée sur l'URL parent

jQuery: Ajouter une classe basée sur l'URL? id =

JQuery - Ajouter une classe active basée sur l'URL mais également sur différents sous-chemins suivants

Ajout d'une classe au lien de navigation principale sur une sous-page basée sur l'URL

Ajouter une classe active à un li lorsque sur l'URL

Ajouter une classe active basée sur l'enfant <a> href

Comment ajouter un argument de mot-clé à une vue basée sur une classe success_url

Meilleur moyen d'obtenir des URL pour une vue basée sur une classe?

Réagir: ajouter une classe active au lien de navigation sélectionné en cliquant sur

Ajouter une classe active à la navigation WordPress

Ajouter une classe active aux éléments de navigation

javascript ajouter une classe active sur cliqué

jQuery - ajoute une classe active de navigation sur le parent

Échec de l'ajout d'une classe de navigation active en fonction de l'URL

Classe de navigation active basée sur le problème d'URL actuel

Passer des variables URL à une vue basée sur une classe

Comment afficher un modèle basé sur un ensemble de requêtes effectué dans une vue basée sur une classe où l'un des arguments pour l'ensemble de requêtes provient du paramètre URL

Ajouter une classe active à l'élément en fonction de l'URL Jquery Django

Je souhaite ajouter et supprimer une classe lorsque l'URL a un identifiant d'onglets de navigation

Comment obtenir correctement une URL pour une ressource sur le chemin de classe dans WebSphere 6.1?

Google Apps Script pour ouvrir une URL basée sur une cellule

Comment ajouter une classe active à une classe existante sur les éléments de menu cliqués?

Ajouter une classe à la navigation si une partie de l'URL correspond aux éléments de menu

Ajouter une classe active au bouton d'onglet sur l'option de menu sélectionnée

Bascule de la barre de navigation Bootstrap utilisée pour ajouter une classe

Comment ajouter une classe active pour une Navbar ?

Ajouter une règle de réécriture d'URL sur le site Web racine pour une URL spécifique

TOP liste

  1. 1

    Microsoft.WebApplication.targets

  2. 2

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  3. 3

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  4. 4

    Comment ajouter une entrée à une table de base de données pour une combinaison de deux tables

  5. 5

    Passer la taille d'un tableau 2D à une fonction ?

  6. 6

    Exporter la table de l'arborescence vers CSV avec mise en forme

  7. 7

    Impossible d'accéder à la vue personnalisée pendant le test de l'interface utilisateur dans XCode

  8. 8

    Créer un système Buzzer à l'aide de python

  9. 9

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  10. 10

    impossible d'obtenir l'image d'arrière-plan en plein écran dans reactjs

  11. 11

    Algorithme: diviser de manière optimale une chaîne en 3 sous-chaînes

  12. 12

    CSS: before ne fonctionne pas sur certains éléments,: after fonctionne très bien

  13. 13

    Conversion double en BigDecimal en Java

  14. 14

    Comment obtenir l'intégration contextuelle d'une phrase dans une phrase à l'aide de BERT ?

  15. 15

    Comment choisir le nombre de fragments et de répliques Elasticsearch

  16. 16

    Comment vérifier si un utilisateur spécifique a un rôle? Discord js

  17. 17

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  18. 18

    Existe-t-il un moyen de voir si mon bot est hors ligne ?

  19. 19

    comment afficher un bouton au-dessus d'un autre élément ?

  20. 20

    Comment activer le message Pylint "too-many-locals" dans VS Code?

  21. 21

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

chaudétiquette

Archive