Maison  >  Article  >  Opération et maintenance  >  jquery implémente la méthode d'affichage de la couleur d'arrière-plan lorsque l'on clique sur un lien

jquery implémente la méthode d'affichage de la couleur d'arrière-plan lorsque l'on clique sur un lien

小云云
小云云original
2018-01-19 10:11:541992parcourir

Cet article partage principalement avec vous une méthode jquery pour réaliser un clic sur un lien et afficher la couleur d'arrière-plan d'un lien après un saut. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

J'ai rencontré ce problème lorsque je travaillais sur un projet. Il va de soi que tant que quelqu'un sait comment utiliser les modèles, de tels problèmes de bas niveau ne devraient pas se produire. Ensuite, il n'y a pas de modèle dans mon parcours, et mes compétences en js et jquery sont au niveau de l'école primaire, donc cela m'a dérangé pendant près d'un après-midi. Permettez-moi de le résumer ici et de le partager avec vous. Partager me rend heureuse ! ! !

1. Veuillez regarder le code et laissez-moi l'analyser

1. Tout d'abord, le menu représente ma liste de menus, et la balise a est. le lien cliqué. L'idée générale est d'obtenir d'abord l'objet du lien a, puis de boucler et d'obtenir d'abord la valeur href du lien a.

2. Récupérez la valeur de l'url de la page après le saut. Comparez simplement

3. Veuillez noter ici, imprimez-le vous-même et voyez comment obtenir les valeurs à des fins de comparaison.

4. Après comparaison, les URL sont les mêmes. Supprimez l'attribut de classe de l'objet a avant de cliquer et ajoutez des styles au lien a actuel.

2. Processus de mise en œuvre

La chose la plus effrayante à propos des blogs est que l'analyse est aussi féroce qu'un tigre et que l'opération réelle est de 0/5, voici donc quelques étapes à analyser :

C'est le processus de débogage et de comparaison.

Ce qui précède est la valeur href du lien obtenu a. Il convient de noter ici que, comme il est dans un état de boucle, il existe de nombreuses valeurs href d'un lien.

Ce qui suit est la valeur de l'URL pour obtenir la page. Comme le montre l'image, les deux ne sont pas égaux. Il y a une légère différence, mais l'impact n'est pas grand.

3. Interception des chaînes par jquery

var length = String(window.location).lastIndexOf('?');
var url = String(window.location).substring(0,length);

1. Le lastIndexof de jquery renvoie la position où le symbole est apparu pour la dernière fois, c'est-à-dire un nombre.

Pouvons-nous obtenir l'URL à partir de ceci ? Position d'apparition

2. la sous-chaîne est une fonction qui intercepte une chaîne. Ce que nous voulons dire ici, c'est intercepter à partir du 0ème bit, et la longueur interceptée est la valeur de longueur.

3. Une fois l'interception réussie :

 if ($($(this))[0].href == url) {
  $('#menu li a').removeClass("selected");
  $(this).parent().addClass('selected');
  }

Comparez les URL et ajoutez des styles s'ils sont égaux.

4. Réaliser l'effet

Voici le rendu. Lorsque vous cliquez sur la colonne « Classification des appareils », la page saute et s'affiche en rose après le saut, indiquant que la page actuelle est cette page.

fin.

Enfin, je ne peux vraiment pas utiliser cet éditeur de démarques, je l'ai écrit plusieurs fois, mais la mise en page est toujours aussi merdique. . . Je ne sais pas comment l'utiliser, je ne sais pas comment utiliser TOT

Recommandations associées :

JS cliquez sur le lien pour passer en affichage masqué content

html Utilisez href pour implémenter un exemple de clic sur un lien pour faire apparaître une boîte de dialogue de téléchargement de fichier

Méthode d'implémentation JS consistant à cliquer sur un lien pour passer à l'affichage du contenu caché

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn