Comment implémenter le changement de focus à l'aide de jQuery-js tutoriel-php.cn

Comment implémenter le changement de focus à l'aide de jQuery

WBOY

Libérer： 2024-02-23 19:48:24

original

579 Les gens l'ont consulté

Comment implémenter le changement de focus à laide de jQuery

Conseils pour utiliser jQuery pour implémenter le changement de focus

Avec le développement continu et la complexité des pages Web, le changement de focus est devenu l'un des problèmes sur lesquels les concepteurs et les développeurs doivent se concentrer. En tant que puissante bibliothèque JavaScript, jQuery fournit de nombreuses méthodes pratiques pour obtenir l'effet de changement de focus. Cet article présentera quelques techniques courantes d'utilisation de jQuery pour réaliser un changement de focus et joindra des exemples de code spécifiques pour votre référence.

1. Changement de mise au point de base

Tout d'abord, voyons comment obtenir l'effet de changement de mise au point de base via jQuery. L'exemple de code suivant montre le changement de focus entre différents éléments lorsqu'un bouton est cliqué :

<!DOCTYPE html>
<html>
<head>
  <title>焦点切换示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .active {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div>
    <button id="btn1">元素1</button>
    <button id="btn2">元素2</button>
    <button id="btn3">元素3</button>
  </div>

  <script>
    $(document).ready(function() {
      $('#btn1').click(function() {
        $(this).toggleClass('active');
        $('#btn2, #btn3').removeClass('active');
      });

      $('#btn2').click(function() {
        $(this).toggleClass('active');
        $('#btn1, #btn3').removeClass('active');
      });

      $('#btn3').click(function() {
        $(this).toggleClass('active');
        $('#btn1, #btn2').removeClass('active');
      });
    });
  </script>
</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, lorsque différents boutons sont cliqués, le bouton correspondant ajoutera ou supprimera la classe active pour changer le style. du bouton et obtenir l'effet de commutation de mise au point. active 类，从而改变按钮的样式，实现焦点的切换效果。

二、利用事件委托实现焦点切换

使用事件委托可以简化代码，减少重复性代码的编写。下面的示例展示了如何通过事件委托来实现焦点切换：

<!DOCTYPE html>
<html>
<head>
  <title>焦点切换示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .active {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="btn-container">
    <button>元素1</button>
    <button>元素2</button>
    <button>元素3</button>
  </div>

  <script>
    $(document).ready(function() {
      $('#btn-container').on('click', 'button', function() {
        $(this).toggleClass('active').siblings().removeClass('active');
      });
    });
  </script>
</body>
</html>

Copier après la connexion

在这个示例中，我们通过事件委托的方式来监听按钮的点击事件，并利用 siblings() 方法来移除其他兄弟元素的 active

2. Utilisez la délégation d'événements pour réaliser un changement de focus

L'utilisation de la délégation d'événements peut simplifier le code et réduire l'écriture de code répétitif. L'exemple suivant montre comment implémenter le changement de focus via la délégation d'événements :

rrreee

Dans cet exemple, nous utilisons la délégation d'événements pour écouter les événements de clic sur un bouton et utilisons la méthode siblings() pour nous déplacer en plus du Classe active d'autres éléments frères, il implémente l'effet de changement de focus. 🎜🎜Conclusion🎜🎜Grâce à l'introduction de cet article, nous avons appris à utiliser jQuery pour implémenter des techniques de changement de focus, y compris le changement de focus de base et l'utilisation de la délégation d'événements. Dans les projets réels, des méthodes appropriées peuvent être sélectionnées en fonction de besoins et de scénarios spécifiques pour réaliser un changement de focus et améliorer l'expérience utilisateur et les effets d'interaction avec les pages. J'espère que cet article vous aidera ! 🎜

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!