jquery a show hide

jQuery ialah perpustakaan JavaScript yang sangat popular yang menyediakan banyak cara untuk memudahkan pengaturcaraan JavaScript. Salah satu ciri yang paling biasa digunakan ialah paparan dan penyembunyian a. Teg biasanya merupakan hiperpautan yang digunakan untuk memaut ke halaman lain, tetapi dalam beberapa kes anda mungkin mahu menogol pautan antara menyembunyikan dan menunjukkannya.

Artikel ini akan memperkenalkan anda cara menggunakan jQuery untuk menunjukkan dan menyembunyikan pautan. Mula-mula, kami akan membincangkan mengapa anda perlu melakukan ini, dan kemudian membincangkan cara menggunakan jQuery untuk mencapai ini.

Mengapa anda perlu menunjukkan dan menyembunyikan pautan?

Dalam reka bentuk halaman, kadangkala anda mungkin mahu pengguna boleh mengklik pada pautan apabila mereka memerlukannya dan menyembunyikan atau melumpuhkannya apabila mereka tidak memerlukannya. Menyembunyikan pautan sangat membantu untuk mengurangkan kekacauan pada halaman dan sering digunakan pada peranti mudah alih.

Contohnya, pada peranti mudah alih, apabila pengguna mengklik butang, anda mungkin mahu menyembunyikan beberapa pautan dalam halaman semasa supaya ruang tidak bersepah. Dalam kes ini, anda boleh menggunakan jQuery untuk menogol keterlihatan pautan.

Bagaimana untuk menunjukkan dan menyembunyikan pautan dalam jQuery?

Pertama, tentukan pautan dalam HTML. Ia kelihatan seperti ini:

<a href="https://example.com">Click me</a>

Seterusnya, dalam fail JavaScript, masukkan perpustakaan jQuery dan kod berikut:

$(document).ready(function(){
    $("a").hide();    // 初始时隐藏a链接
    $("button").click(function(){
        $("a").toggle(); // 当单击按钮时显示/隐藏a链接
    });
});

Contoh ini akan menyembunyikan semua pautan apabila halaman dimuatkan. Ia kemudiannya akan menambah acara klik pada elemen butang dan apabila pengguna mengklik butang ia akan menogol keterlihatan semua pautan. Jika pautan sedang disembunyikan, ia akan ditunjukkan, jika ia ditunjukkan pada masa ini, ia akan disembunyikan.

Walau bagaimanapun, kod ini akan digunakan pada semua pautan pada keseluruhan halaman Jika anda hanya mahu mengendalikan pautan tertentu, anda juga harus menandakannya, apabila pautan disembunyikan, jika Pengguna mengklik mereka dan mereka sebenarnya masih boleh membuka pautan.

Berikut ialah beberapa kod yang dipertingkatkan yang menyasarkan pautan dengan kelas CSS tertentu dan melumpuhkan semua pautan apabila menyembunyikannya:

<a href="https://example.com" class="my-link">Click me</a>

$(document).ready(function(){
    $(".my-link").hide().click(function(e){
        e.preventDefault(); // 取消a链接的默认行为
    });
    $("button").click(function(){
        $(".my-link").toggle().prop("disabled", false);  // 显示/隐藏，启用/禁用a链接
    });
});

Kod ini mentakrifkan pautan dengan kelas CSS "my -link" dan sembunyikannya apabila halaman dimuatkan. Apabila pengguna mengklik salah satu pautan, ia menghalang tingkah laku lalai (iaitu melompat ke URL pautan). Akhir sekali, apabila pengguna mengklik butang, ia akan menunjukkan atau menyembunyikan semua pautan dengan kelas itu dan mendayakan atau melumpuhkannya.

Ringkasan

Menggunakan jQuery untuk menunjukkan dan menyembunyikan pautan ialah kaedah yang mudah, berkuasa dan sangat berguna untuk meningkatkan kejelasan dan keindahan halaman.

Kami boleh beroperasi pada pautan tertentu dengan menukar kelas dan atribut. Kami juga boleh menambah atribut lain, seperti "data-href", untuk menyimpan URL yang dipautkan supaya ia boleh dipulihkan kepada keadaan asalnya jika perlu.

Tidak kira mengapa anda perlu mengawal paparan dan menyembunyikan pautan, jQuery boleh melaksanakan fungsi dengan mudah. Ia adalah perpustakaan JavaScript popular yang menyediakan kaedah yang berkuasa dan berkesan untuk memudahkan pengaturcaraan JavaScript, terutamanya untuk bidang pembangunan web.

Atas ialah kandungan terperinci jquery a show hide. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!