How to implement focus switching using jQuery-JS Tutorial-php.cn

How to implement focus switching using jQuery

WBOY

Release： 2024-02-23 19:48:24

Original

600 people have browsed it

How to implement focus switching using jQuery

Title: Tips for using jQuery to achieve focus switching

With the continuous development and complexity of Web pages, focus switching has become a focus for designers and developers. One of the issues of concern. As a powerful JavaScript library, jQuery provides many convenient methods to achieve the focus switching effect. This article will introduce some common techniques for using jQuery to achieve focus switching, and attach specific code examples for your reference.

1. Basic focus switching

First, let’s take a look at how to achieve the basic focus switching effect through jQuery. The following code example demonstrates how to switch focus between different elements when a button is clicked:

<!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>

Copy after login

In the above example, when different buttons are clicked, the corresponding buttons will be added or removedactive class, thereby changing the style of the button and achieving the focus switching effect.

2. Use event delegation to achieve focus switching

Using event delegation can simplify the code and reduce the writing of repetitive code. The following example shows how to implement focus switching through event delegation:

<!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>

Copy after login

In this example, we use event delegation to listen to button click events and use siblings() Method to remove the active class of other sibling elements to achieve the focus switching effect.

Conclusion

Through the introduction of this article, we have learned how to use jQuery to achieve focus switching techniques, including basic focus switching and the use of event delegation. In actual projects, appropriate methods can be selected according to specific needs and scenarios to achieve focus switching and improve user experience and page interaction effects. Hope this article helps you!

The above is the detailed content of How to implement focus switching using jQuery. For more information, please follow other related articles on the PHP Chinese website!