Maison >interface Web >js tutoriel >jquery se rend compte qu'après avoir cliqué sur un lien, le lien se transforme en un effet de couleur personnalisé

jquery se rend compte qu'après avoir cliqué sur un lien, le lien se transforme en un effet de couleur personnalisé

php中世界最好的语言
php中世界最好的语言original
2018-03-15 10:18:412027parcourir

Cette fois, je vais vous faire comprendre à jquery qu'après avoir cliqué sur un lien, le lien se transformera en un effet de couleur personnalisé. jquery se rendra compte qu'après avoir cliqué sur un lien, le lien se transformera en un effet de couleur personnalisé . Quelles sont les précautions ? Ce qui suit est un cas pratique, regardons-y.

J'ai rencontré ce problème lorsque je travaillais sur un projet. Logiquement, tant que quelqu'un sait 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. , le menu me représente la liste des menus, la balise a est le lien cliqué. L'idée générale est d'obtenir d'abord l'objet d'un lien, puis de boucler pour obtenir d'abord la valeur href d'un lien.

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 le fonctionnement réel est 0/5, alors ici Analysons quelques étapes :

C'est le processus de débogage 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 par jquery de la chaîne

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 dernière apparition, c'est-à-dire le numéro.

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. Effet de réalisation

C'est 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, cet éditeur de démarques est vraiment inutile. Je l'ai écrit plusieurs fois, mais la mise en page est toujours la même. avant. Poulet épicé. . . Je ne sais pas comment l'utiliser. Je ne sais pas comment l'utiliser TOT

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Demande ajax dans jquery et réponse ajax dans le servlet

Implémentation de jquery sur la page de démarrage Charger des données immédiatement

Obtenir un effet de liaison entre la zone de saisie et la zone déroulante

Ajax et Jquery se combinent avec la base de données pour réaliser liste déroulante Liaison secondaire du cadre

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