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

Raj Chopra

J'ai ajouté les onglets de navigation de Bootstrap à mon projet. J'ai pu ajouter une logique qui ajoute l'ID de l'onglet actuel à l'URL.

Maintenant, j'aimerais que mon JS active l'onglet lors du chargement de la page, en fonction de l'ID fourni par le paramètre/hash d'URL.

Le problème que je reçois maintenant, c'est juste la dernière condition si.

$(document).ready(function() {
  var url = window.location.href;
  if ("url:contains('features#standard-features')") {
    $(".features_tab_nav .feat_nav_item0 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item1 a , .features_tab_nav .feat_nav_item2 a ,  .features_tab_nav .feat_nav_item3 a").removeClass("active");
  }
  if ("url:contains('features#optional-design-features-accesories')") {
    $(".features_tab_nav .feat_nav_item1 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item0 a , .features_tab_nav .feat_nav_item2 a ,  .features_tab_nav .feat_nav_item3 a").removeClass("active");
  }

  if ("url:contains('features#benefits-of-steel-structures')") {
    $(".features_tab_nav .feat_nav_item2 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item0 a , .features_tab_nav .feat_nav_item1 a ,  .features_tab_nav .feat_nav_item3 a").removeClass("active");
  }
  if ("url:contains('features#optional-roof-and-wall-panels')") {
    $(".features_tab_nav .feat_nav_item3 a").attr("class", "nav-link cvxcvxc active");
    $(".features_tab_nav .feat_nav_item0 a , .features_tab_nav .feat_nav_item1 a ,  .features_tab_nav .feat_nav_item2 a").removeClass("active");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Toxique

si vous déclarez var url au début, alors pourquoi utilisez-vous la chaîne "url:contains('')" ??

essaye ça :

if(url.indexOf("features#standard-features") > -1){
// your code
}

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

Je souhaite ajouter et supprimer un grand nombre de nombres à l'aide d'un ArrayList en c#

Comment puis-je ajouter / supprimer une classe à un élément lorsque l'URL contient une chaîne spécifique?

Comment puis-je activer une icône en utilisant un identifiant et non une classe et comment puis-je la supprimer et l'ajouter automatiquement ?

Je souhaite ajouter un style ou une classe à l'aide d'un script

Comment supprimer la barre d'onglets du haut lorsque je navigue vers une autre page à partir de l'un des onglets de React Native

je veux ajouter et supprimer une classe active à ma navigation lors du défilement

Comment puis-je ajouter et supprimer une classe active à un élément en JavaScript pur

comment ajouter une classe à un élément et supprimer une classe de tous les frères et sœurs d'un élément angulaire

Ajouter et supprimer une classe active lors d'un clic sur l'élément

Swift-Comment ajouter une barre d'onglets ET une barre de navigation à un contrôleur de vue unique?

Vous rencontrez un problème lorsque je termine un exercice de cours dans udacity et que je souhaite ajouter une ombre dans three.js?

Je souhaite supprimer les guillemets doubles ("") d'une colonne particulière d'une table dans Hive lorsque je l'interroge

Comment incrémenter automatiquement un identifiant et ajouter un identifiant à une classe d'amis

Comment ajouter et supprimer une classe en faisant défiler un élément?

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

Je souhaite télécharger le contenu d'un DriveItem, comment obtenir l'identifiant de DriveItem?

comment puis-je obtenir l'identifiant d'un objet de classe, dans une autre classe et stocker dans la base de données - Django

Ajouter une classe à un lien lorsque vous cliquez dessus et la supprimer lorsque vous cliquez ailleurs

Je souhaite ajouter une classe à un iframe en fonction de la recherche d'une classe spécifique dans le code html de cet iframe

Supprimer et ajouter une classe sur un élément de liste cliquez sur jquery?

Pourquoi mon identifiant client est toujours nul lorsque je souhaite ajouter un nouveau client

ajouter une classe en utilisant jquery en fonction du nom de la classe et d'un identifiant

Ajouter et supprimer une classe de l'étiquette d'entrée radio

Comment ajouter dynamiquement une classe et un identifiant à une balise spécifique à l'aide de Javascript / JQuery

Comment ajouter une classe active dans un élément de portefeuille de volet d'onglets dans wordpress?

ajouter une classe lorsque vous faites défiler jusqu'à un identifiant spécifique ReactJS

Ajouter une classe à cibler et supprimer la classe d'autres éléments avec le même nom de classe

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

J'ai créé un ensemble de délégation réutilisable et je souhaite l'associer à une HostedZone via CloudFormation

TOP liste

  1. 1

    Comment exécuter un fichier python avec des droits d'administrateur dans pycharm

  2. 2

    comment obtenir un objet de requête dans les tests unitaires de django?

  3. 3

    mongo kafka connect source

  4. 4

    Vérifier la longueur du nombre à partir du message, puis utiliser la valeur dans l'instruction

  5. 5

    comment convertir une chaîne en un tuple dateutil jour de la semaine sans utiliser eval

  6. 6

    Comment ajouter un texte dans un texte Python/Tkinter

  7. 7

    Aide de variable de débogage pprint jinja2

  8. 8

    Dans les modèles Hugo, comment vérifier la longueur du tableau de fichiers JSON?

  9. 9

    Impression de la longueur du chemin le plus court dans le labyrinthe

  10. 10

    Exécuter la requête externe pour chaque date obtenue à partir de la requête interne

  11. 11

    Recherche de dicton Jinja2 à l'aide d'une clé variable

  12. 12

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

  13. 13

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

  14. 14

    définir une propriété pour chaque nœud dans neo4j

  15. 15

    Pourquoi cette requête Java échoue-t-elle? renvoyer 0 quand il y a des résultats

  16. 16

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

  17. 17

    Laravel 8: Attempt to read property "id" on null

  18. 18

    Comment obtenir tous les champs d'un objet (y compris sa superclasse), à l'aide de l'API Mirrors de Dart?

  19. 19

    Référencement des assemblys de structure .net 4.7 dans la solution .net core 2

  20. 20

    Microsoft.WebApplication.targets

  21. 21

    obtenir le nombre de marqueur affiché sur la carte

chaudétiquette

Archive