Utilisez jquery pour changer l'adresse de connexion

Avec le développement et les progrès continus d'Internet, la conception Web devient de plus en plus interactive et dynamique. En tant que bibliothèque JavaScript légère, jQuery est largement utilisée dans le développement de frontaux Web. Elle peut nous aider à créer plus facilement une page Web. effets. Parmi elles, une fonction très courante consiste à utiliser jQuery pour modifier l'adresse de connexion. Cet article présentera cet aspect en détail.

1. Comment changer l'adresse de connexion

Changer l'adresse de connexion signifie changer l'adresse URL correspondant au lien sans sauter à la page lorsque l'utilisateur clique sur le lien. Par exemple, nous pouvons utiliser cette fonction pour créer un site Web d'une seule page et charger le contenu correspondant en changeant d'adresse URL, donnant ainsi aux utilisateurs l'impression de visiter plusieurs pages, obtenant ainsi un effet dynamique sans rafraîchissement. Alors, comment utiliser jQuery pour changer l’adresse de connexion ?

1. Utilisez la propriété window.location.href

window.location.href est une propriété JavaScript couramment utilisée, utilisée pour obtenir ou définir l'adresse URL de la page actuelle. Si nous voulons changer l'adresse du lien, il suffit d'utiliser cet attribut. La méthode d'implémentation spécifique est la suivante :

$('#link').click(function(){
  window.location.href = 'http://www.example.com'; //修改链接地址
});

Parmi eux, #link est l'identifiant du lien dont l'adresse du lien doit être modifiée, et http://www.example.com est l'adresse URL modifiée. Lorsque l'utilisateur clique sur le lien, il accèdera à cette adresse URL et la nouvelle adresse sera également affichée dans la barre d'adresse.

2. Utilisez la méthode history.pushState()

En plus d'utiliser l'attribut window.location.href, vous pouvez également utiliser la méthode history.pushState() nouvellement introduite dans HTML5 pour implémenter la fonction de modification de l'adresse du lien. . En utilisant cette méthode, la modification de l'adresse de la page n'entraîne pas le rechargement de la page, mais modifie l'état actuel dans l'historique du navigateur via le code JavaScript.

$('#link').click(function(){
  history.pushState(null, null, 'http://www.example.com'); //修改链接地址
});

Parmi eux, null et null sont des paramètres d'espace réservé, indiquant que les données d'état et le titre pertinents n'ont pas changé, et http://www.example.com est l'adresse URL modifiée. De même, lorsque l'utilisateur clique sur le lien, l'adresse URL sera remplacée par une nouvelle adresse, mais la page ne sera pas actualisée et la nouvelle adresse sera affichée dans la barre d'adresse.

2. Utilisez jQuery pour obtenir l'effet de changement dynamique de page sans actualiser

Dans le chapitre ci-dessus, nous avons présenté la méthode d'utilisation de jQuery pour modifier l'adresse du lien, mais si nous voulons obtenir l'effet de changement dynamique de page sans actualiser , alors nous devons améliorer et développer les méthodes ci-dessus. Ce qui suit est une méthode de mise en œuvre plus générale.

1. Basculer entre les nœuds

Tout d'abord, nous devons créer plusieurs nœuds de page cachés (peut être des balises div, p, section, etc.) sur une page. Par exemple, nous pouvons le créer comme ceci :

<div id="page1" class="page">
  <h1>这是第1页</h1>
</div>
<div id="page2" class="page">
  <h1>这是第2页</h1>
</div>
<div id="page3" class="page">
  <h1>这是第3页</h1>
</div>

Parmi eux, class="page" sert à faciliter la définition des styles et les opérations JavaScript, et la valeur id est à nous faciliter la sélection et l'exploitation de ces nœuds via jQuery.

2. Liaison des liens

Ensuite, nous devons lier chaque lien à un événement de clic. Lorsqu'un utilisateur clique sur un lien, nous pouvons utiliser jQuery pour obtenir l'attribut href du lien et analyser la valeur id du nœud de page qui doit être affiché. Ensuite, nous montrons le nœud et masquons les autres nœuds. L'implémentation spécifique est la suivante :

$('a').click(function(e){
  e.preventDefault(); //防止链接跳转
  var pageId = $(this).attr('href'); //获取链接的href属性
  $('.page').hide(); //先隐藏所有的页面节点
  $(pageId).show(); //再展示对应的页面节点
});

Parmi eux, $('a') signifie sélectionner tous les liens, e.preventDefault() est le comportement par défaut pour empêcher les liens, $(this).attr('href') est pour obtenir la valeur actuelle de l'attribut href du lien, $('.page').hide() masque tous les nœuds de page et $(pageId).show() affiche les nœuds de page correspondants.

3. Changement d'adresse URL

Enfin, nous devons également ajouter la logique de changement d'adresse URL en cas de clic du lien, de sorte que lorsque l'utilisateur passe à différentes pages, l'adresse URL correspondante soit affichée dans la barre d'adresse en temps réel. La méthode d'implémentation spécifique est la suivante :

$('a').click(function(e){
  e.preventDefault(); //防止链接跳转
  var pageId = $(this).attr('href'); //获取链接的href属性
  $('.page').hide(); //先隐藏所有的页面节点
  $(pageId).show(); //再展示对应的页面节点
  history.pushState(null, null, pageId); //改变URL地址
});

Parmi eux, history.pushState(null, null, pageId) utilise la méthode history.pushState() pour modifier l'adresse URL. Le pageId est ici la valeur id du nœud de page affiché. , qui est l'adresse URL correspondante.

3. Résumé

Grâce à l'introduction ci-dessus, nous avons appris comment utiliser jQuery pour modifier l'adresse du lien et comment obtenir un effet sans actualisation en changeant dynamiquement de page. Dans le développement réel, nous pouvons choisir les méthodes appropriées à mettre en œuvre en fonction des besoins du projet et des circonstances spécifiques, améliorant ainsi l'interactivité et l'expérience utilisateur du site Web. Cependant, il convient de noter que lors de l'utilisation de la méthode history.pushState(), le navigateur doit prendre en charge HTML5, sinon cela n'aura aucun effet.

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!