Bagaimana untuk melaksanakan penukaran fokus menggunakan jQuery-tutorial js-php.cn

Bagaimana untuk melaksanakan penukaran fokus menggunakan jQuery

WBOY

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

asal

630 orang telah melayarinya

Bagaimana untuk melaksanakan penukaran fokus menggunakan jQuery

Tajuk: Petua menggunakan jQuery untuk melaksanakan penukaran fokus

Dengan pembangunan berterusan dan kerumitan halaman web, penukaran fokus telah menjadi salah satu isu yang perlu difokuskan oleh pereka bentuk dan pembangun. Sebagai perpustakaan JavaScript yang berkuasa, jQuery menyediakan banyak kaedah mudah untuk mencapai kesan penukaran fokus. Artikel ini akan memperkenalkan beberapa teknik biasa untuk menggunakan jQuery untuk mencapai penukaran fokus, dan melampirkan contoh kod khusus untuk rujukan anda.

1. Pensuisan fokus asas

Pertama, mari kita lihat cara untuk mencapai kesan penukaran fokus asas melalui jQuery. Contoh kod berikut menunjukkan penukaran fokus antara elemen berbeza apabila butang diklik:

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

Salin selepas log masuk

Dalam contoh di atas, apabila butang berbeza diklik, butang yang sepadan akan menambah atau mengalih keluar kelas active< /code> untuk menukar gaya butang dan mencapai kesan penukaran fokus. <code>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>

Salin selepas log masuk

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

2. Gunakan perwakilan acara untuk mencapai penukaran fokus

Menggunakan perwakilan acara boleh memudahkan kod dan mengurangkan penulisan kod berulang. Contoh berikut menunjukkan cara melaksanakan penukaran fokus melalui perwakilan acara:

rrreee

Dalam contoh ini, kami menggunakan perwakilan acara untuk mendengar acara klik butang dan menggunakan kaedah adik-beradik() untuk bergerak Selain daripada Kelas aktif elemen adik beradik yang lain, ia melaksanakan kesan penukaran fokus. 🎜🎜Kesimpulan🎜🎜Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan jQuery untuk melaksanakan teknik penukaran fokus, termasuk penukaran fokus asas dan penggunaan delegasi acara. Dalam projek sebenar, kaedah yang sesuai boleh dipilih mengikut keperluan dan senario khusus untuk mencapai penukaran fokus dan meningkatkan pengalaman pengguna dan kesan interaksi halaman. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penukaran fokus menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!