Dev Faq
12
votes

JQuery Ajouter une classe basée sur la page URL

J'ai ce que je pense est une simple question, mais je ne peux pas le faire travailler pour la vie de moi.

Tout ce que je veux faire, c'est ajouter du javascript à la page qui Ajoute une classe au conteneur de page principale basé sur l'URL.

Disons que j'ai un site sur root.com et la structure HTML suivante (lâche): xxx

Ce que je veux faire est un script qui, si la page = (par exemple) root.com/technologie, il ajoute une classe à la DIV principale. Donc, la DIV ressemblerait maintenant à: xxx

J'ai chargé jQuery, alors j'aimerais le faire de cette façon.

0 commentaires

5 Réponses :

2
votes

Utilisez emplacement objet intégré pour déterminer l'URL complète ou certaines parties de ça.

1 commentaires

Clairement, cela est correct, mais cela ne répond pas complètement à ma question de comment de le faire.

3
votes

quelque chose comme ça ci-dessous aidait? Basé sur une autre réponse, juste en faisant

console.log (window.location)

, vous pouvez richesse de richesse d'informations relatives à votre objet de localisation xxx

0 commentaires
26
votes

Vous pouvez utiliser fenêtre.location pour obtenir l'URL actuelle, puis basculez sur la base de celle-ci: xxx

ceci utilise une expression régulière pour voir si l'URL contient une phrase particulière (notamment: la technologie ), et si oui, ajoute une classe à l'élément #main .

3 commentaires

@alex Vidal Cela fonctionne bien pour moi, mais il charge un peu plus tard que la normale. J'utilise cette action pour maintenir un sous-menu ouvert une fois que l'utilisateur est déterminé par conséquent, l'utilisateur peut voir après 1-2 secondes comment le menu Sous-catégorie s'ouvre. J'aimerais que cela fasse cela instantanément, comment puis-je éviter cela?

Comment cela peut-il être modifié pour fonctionner si vous à la route (page d'accueil) du site?

Merci! Pouvez-vous me dire ce que .test fait?

8
votes

Eh bien, voici comment je le ferais: xxx

de cette façon, vous gardez votre code propre et vous pouvez facilement ajouter un autre cas.

Voir ici what window.location.pathName signifie.

3 commentaires

J'aime ça parce que, comme vous le dites, vous pouvez facilement ajouter un autre cas sans blâmer les choses. Mais je ne peux pas le faire travailler ...

J'aime mieux cette réponse puis la "meilleure" réponse sélectionnée. Les déclarations de commutation sont bien plus propres, puis écrivez des conditionnels.

@Mattmartin c'est probablement parce que vous devez ajouter pause; à la fin de chaque cas. C'était le cas pour moi .. lol

0
votes 
      $(function(){
        var cUrl = window.location.href;
         $(".product-type-swatches__list a").each(function(){
                 if ($(this).attr("href") == cUrl){
                         $(this).addClass("is-selected");
                 }
         });
    });
0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO