Rumah > Artikel > hujung hadapan web > fokus jquery hilang dan bersembunyi
fokus jquery hilang dan bersembunyi
- PHPzasal
- 2023-05-14 11:08:37457semak imbas
Dalam reka bentuk web, tumpuan hilang dan bersembunyi adalah kesan biasa. Kita boleh mencapai kesan ini dengan mudah dengan menulis kod menggunakan jQuery. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan fokus hilang dan menyediakan beberapa kod sampel.
Apakah fokus hilang dan bersembunyi?
Dalam reka bentuk web, tumpuan hilang dan bersembunyi adalah kesan biasa. Apabila kami memasukkan maklumat atau memilih pilihan dalam kawalan interaktif seperti kotak input atau tab, beberapa gesaan atau menu operasi biasanya muncul. Apabila kami meninggalkan kawalan dan mengalihkan fokus ke lokasi lain, gesaan atau menu operasi ini akan hilang secara automatik. Tujuan kesan ini adalah untuk meningkatkan kejelasan visual dan keindahan halaman.
Bagaimana untuk menggunakan jQuery untuk menyembunyikan fokus?
Untuk mencapai fokus hilang dan kesan bersembunyi, kita boleh menggunakan jQuery untuk menulis kod. Berikut ialah contoh kod untuk mencapai kesan ini:
<!DOCTYPE html>
<html>
<head>
<title>jQuery 焦点消失隐藏示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#inputBox").focus(function(){
$("#tipBox").removeClass("hidden");
}).blur(function(){
$("#tipBox").addClass("hidden");
});
});
</script>
</body>
</html>Kod di atas menunjukkan contoh kotak input dan kotak gesaan. Apabila pengguna memasukkan maklumat dalam kotak input, kotak gesaan memaparkan maklumat yang sepadan. Apabila pengguna meninggalkan kotak input, kotak gesaan secara automatik hilang.
Dalam kod, kami menggunakan kaedah fokus dan kabur jQuery. Apabila kotak input mendapat fokus, kami menggunakan kaedah removeClass untuk memadam kelas tersembunyi kotak gesaan supaya ia dipaparkan pada halaman. Apabila pengguna meninggalkan kotak input, kami menggunakan kaedah addClass untuk menambah kelas tersembunyi supaya kotak gesaan tersembunyi secara automatik.
Kami juga mentakrifkan kelas tersembunyi dan menggunakan paparan: tiada atribut untuk menetapkan kotak gesaan untuk disembunyikan pada mulanya. Dengan cara ini, apabila pengguna memasuki halaman untuk kali pertama, kotak gesaan akan disembunyikan secara lalai.
Kod sampel lain
Selain kod sampel di atas, kami juga menyediakan beberapa fokus lain yang hilang dan menyembunyikan kod sampel untuk rujukan anda:
Petua Tab
<!DOCTYPE html>
<html>
<head>
<title>选项卡提示</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.tip {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
padding: 5px;
}
.active {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="tab active">选项卡1</li>
<li class="tab">选项卡2</li>
<li class="tab">选项卡3</li>
</ul>
<div class="tip active">选项卡1的提示信息</div>
<div class="tip">选项卡2的提示信息</div>
<div class="tip">选项卡3的提示信息</div>
<script>
$(document).ready(function(){
$(".tab").mouseover(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("hidden").addClass("active");
}).mouseout(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("active").addClass("hidden");
});
});
</script>
</body>
</html> Kod di atas menunjukkan contoh gesaan tab. Apabila pengguna menuding tetikus pada tab, petua alat yang sepadan muncul pada halaman. Apabila pengguna mengalihkan tetikus keluar dari tab, kotak gesaan secara automatik hilang.
Dalam kod, kami menggunakan kaedah alih tetikus dan tetikus jQuery. Kami menggunakan kaedah removeClass untuk mengalih keluar kelas tersembunyi petua alat dan menambah kelas aktif untuk menjadikannya kelihatan pada halaman apabila tetikus melayang di atas tab. Apabila tetikus bergerak keluar dari tab, kami menggunakan kaedah removeClass untuk memadam kelas aktif dan menambah kelas tersembunyi untuk membuat kotak gesaan secara automatik menyembunyikan.
Kotak dan butang input
<!DOCTYPE html>
<html>
<head>
<title>输入框和按钮示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<button id="btn">提交</button>
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var inputValue = $("#inputBox").val();
if(inputValue === ""){
$("#tipBox").removeClass("hidden");
}else{
$("#tipBox").addClass("hidden");
}
});
});
</script>
</body>
</html>Kod di atas menunjukkan contoh kotak input dan butang. Apabila pengguna mengklik butang hantar, jika kotak input kosong, kotak gesaan akan dipaparkan pada halaman. Jika tidak, kotak gesaan akan hilang secara automatik.
Dalam kod, kami menggunakan kaedah klik jQuery. Apabila pengguna mengklik butang hantar, kami menggunakan kaedah val untuk mendapatkan kandungan dalam kotak input dan menentukan sama ada ia kosong. Jika ia kosong, kami menggunakan kaedah removeClass untuk memadam kelas tersembunyi kotak gesaan supaya ia boleh dipaparkan pada halaman. Jika tidak, kami menggunakan kaedah addClass untuk menambah kelas tersembunyi supaya kotak gesaan disembunyikan secara automatik.
Kesimpulan
Fokus hilang dan bersembunyi adalah kesan biasa dalam reka bentuk web. Kita boleh mencapai kesan ini dengan mudah dengan menulis kod menggunakan jQuery. Dalam artikel ini, kami memperkenalkan pengetahuan tentang hilangnya fokus dan menyediakan beberapa contoh kod. Jika anda ingin mencapai fokus hilang dan kesan menyembunyikan, anda boleh merujuk kepada kod yang disediakan dalam artikel ini dan membuat pengubahsuaian dan pelarasan yang sepadan.
Atas ialah kandungan terperinci fokus jquery hilang dan bersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!