Comment utiliser jquery pour modifier le style d'arrière-plan en cliquant sur un lien-js tutoriel-php.cn

Comment utiliser jquery pour modifier le style d'arrière-plan en cliquant sur un lien

亚连

Libérer： 2018-06-11 14:52:26

original

2383 Les gens l'ont consulté

Ci-dessous, je vais partager 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. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

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

Il s'agit du 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(&#39;?&#39;);
var url = String(window.location).substring(0,length);

Copier après la connexion

1. Le lastIndexof de jquery renvoie la position où le symbole est apparu pour la dernière fois. Nombres.

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) {
  $(&#39;#menu li a&#39;).removeClass("selected");
  $(this).parent().addClass(&#39;selected&#39;);
  }

Copier après la connexion

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, 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 mauvaise. . . Je ne sais pas comment l'utiliser, je ne sais pas comment l'utiliser TOT

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.