hujung hadapan web
tutorial js
Bagaimana untuk melaksanakan penukaran fokus menggunakan jQuery
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>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>在这个示例中，我们通过事件委托的方式来监听按钮的点击事件，并利用 siblings() 方法来移除其他兄弟元素的 active
rrreee
Dalam contoh ini, kami menggunakan perwakilan acara untuk mendengar acara klik butang dan menggunakan kaedahadik-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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
37
110
Bagaimana untuk menyediakan lompat pada halaman log masuk layui
Apr 04, 2024 am 03:12 AM
Langkah penetapan lompat halaman log masuk Layui: Tambah kod lompat: Tambah pertimbangan dalam borang log masuk serah acara klik butang, dan lompat ke halaman yang ditentukan melalui window.location.href selepas berjaya log masuk. Ubah suai konfigurasi borang: tambah medan input tersembunyi pada elemen borang lay-filter="login", dengan nama "redirect" dan nilainya ialah alamat halaman sasaran.
Cara menambah acara sentuhan pada gambar dalam vue
May 02, 2024 pm 10:21 PM
Bagaimana untuk menambah acara klik pada imej dalam Vue? Import contoh Vue. Buat contoh Vue. Tambahkan imej pada templat HTML. Tambahkan acara klik menggunakan arahan v-on:click. Tentukan kaedah handleClick dalam contoh Vue.
Pembangunan bahasa Hongmeng HarmonyOS dan Go
Apr 08, 2024 pm 04:48 PM
Pengenalan kepada pembangunan bahasa HarmonyOS dan Go HarmonyOS ialah sistem pengendalian teragih yang dibangunkan oleh Huawei, dan Go ialah bahasa pengaturcaraan moden Gabungan kedua-duanya menyediakan penyelesaian yang berkuasa untuk membangunkan aplikasi teragih. Artikel ini akan memperkenalkan cara menggunakan bahasa Go untuk pembangunan dalam HarmonyOS dan mendalami pemahaman melalui kes praktikal. Pemasangan dan Persediaan Untuk menggunakan bahasa Go untuk membangunkan aplikasi HarmonyOS, anda perlu memasang GoSDK dan HarmonyOSSDK terlebih dahulu. Langkah-langkah khusus adalah seperti berikut: #Install GoSDKgogetgithub.com/golang/go#Set PATH
Perkara yang mesti dimiliki oleh veteran: Petua dan langkah berjaga-jaga untuk * dan & dalam bahasa C
Apr 04, 2024 am 08:21 AM
Dalam bahasa C, ia mewakili penunjuk, yang menyimpan alamat pembolehubah lain & mewakili pengendali alamat, yang mengembalikan alamat memori pembolehubah. Petua untuk menggunakan penunjuk termasuk mentakrifkan penunjuk, membatalkan rujukan dan memastikan bahawa penunjuk menunjuk ke alamat yang sah & termasuk mendapatkan alamat pembolehubah, dan mengembalikan alamat elemen pertama tatasusunan apabila mendapatkan alamat elemen tatasusunan; . Contoh praktikal yang menggambarkan penggunaan penunjuk dan pengendali alamat untuk membalikkan rentetan.
Apakah mekanisme dipacu peristiwa bagi fungsi C++ dalam pengaturcaraan serentak?
Apr 26, 2024 pm 02:15 PM
Mekanisme dipacu peristiwa dalam pengaturcaraan serentak bertindak balas kepada peristiwa luaran dengan melaksanakan fungsi panggil balik apabila peristiwa berlaku. Dalam C++, mekanisme dipacu peristiwa boleh dilaksanakan dengan penunjuk fungsi: penunjuk fungsi boleh mendaftarkan fungsi panggil balik untuk dilaksanakan apabila peristiwa berlaku. Ungkapan Lambda juga boleh melaksanakan panggilan balik acara, membenarkan penciptaan objek fungsi tanpa nama. Kes sebenar menggunakan penunjuk fungsi untuk melaksanakan peristiwa klik butang GUI, memanggil fungsi panggil balik dan mencetak mesej apabila peristiwa itu berlaku.
Apr 09, 2024 pm 12:45 PM
Jawapan: JavaScript menyediakan pelbagai kaedah untuk mendapatkan elemen halaman web, termasuk menggunakan id, nama teg, nama kelas dan pemilih CSS. Penerangan terperinci: getElementById(id): Dapatkan elemen berdasarkan id unik. getElementsByTagName(tag): Mendapatkan kumpulan elemen dengan nama tag yang ditentukan. getElementsByClassName(class): Mendapatkan kumpulan elemen dengan nama kelas yang ditentukan. querySelector(selector): Gunakan pemilih CSS untuk mendapatkan elemen padanan pertama. querySelectorAll(selector): Dapatkan semua padanan menggunakan pemilih CSS
Mengapakah peristiwa klik dalam js tidak boleh dilaksanakan berulang kali?
May 07, 2024 pm 06:36 PM
Acara klik dalam JavaScript tidak boleh dilaksanakan berulang kali kerana mekanisme menggelegak acara. Untuk menyelesaikan masalah ini, anda boleh mengambil langkah berikut: Gunakan tangkapan peristiwa: Tentukan pendengar acara untuk dicetuskan sebelum acara berbuih. Menyerahkan acara: Gunakan event.stopPropagation() untuk menghentikan acara menggelegak. Gunakan pemasa: cetuskan pendengar acara sekali lagi selepas beberapa ketika.
Apakah maksud div dalam css
Apr 28, 2024 pm 02:21 PM
DIV dalam CSS ialah pemisah atau bekas dokumen yang digunakan untuk mengumpulkan kandungan, mencipta reka letak, menambah gaya dan interaktiviti. Dalam HTML, elemen DIV menggunakan sintaks <div></div>, di mana div mewakili elemen yang atribut dan kandungan boleh ditambah. DIV ialah elemen peringkat blok yang menduduki keseluruhan baris dalam penyemak imbas.
