Bagaimanakah Saya Boleh Menggunakan jQuery untuk Togol Kelas Aktif Tunggal secara Dinamik pada Item Menu?-tutorial css-php.cn

Bagaimanakah Saya Boleh Menggunakan jQuery untuk Togol Kelas Aktif Tunggal secara Dinamik pada Item Menu?

Linda Hamilton

Lepaskan： 2024-11-25 13:58:11

asal

411 orang telah melayarinya

How Can I Use jQuery to Dynamically Toggle a Single Active Class on Menu Items?

Menukar Kelas Secara Dinamik pada Item Menu dengan jQuery

Dalam siaran ini, kami menghadapi senario di mana kami ingin menambah dan mengalih keluar kelas secara dinamik apabila item menu tertentu diklik. Objektifnya adalah untuk mengekalkan satu kelas aktif pada satu masa, meniru gelagat navigasi menu biasa.

Untuk mencapai matlamat ini, pada mulanya kami menambah kelas 'semasa' pada 'pautan-pautan' untuk menetapkan aktif awalnya negeri. Selepas itu, kami melampirkan pendengar acara pada

elemen dalam menu. Apabila mana-mana

diklik, ia memperoleh kelas 'semasa', manakala kelas itu dikeluarkan oleh adik-beradiknya, memastikan eksklusiviti.

Walau bagaimanapun, untuk mencerminkan keadaan aktif dengan sewajarnya dari awal, kami boleh memperhalusi pendekatan kami. Daripada menambah secara langsung kelas 'semasa' pada 'pautan-tentang', kami boleh menggunakan pengendali acara yang diubah suai yang mula-mula mengalih keluar kelas 'semasa' daripada mana-mana elemen 'a' sedia ada dalam menu yang pada masa ini memilikinya. Kami kemudian menambah kelas 'semasa' pada elemen yang diklik. Pelarasan ini menjamin bahawa 'pautan tentang' bermula tanpa kelas 'semasa' dan mengekalkan keadaan aktif tunggal yang diingini sepanjang interaksi menu.

Berikut ialah kod jQuery yang dipertingkatkan dengan penghalusan ini:

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

Salin selepas log masuk

Pendekatan ini memastikan bahawa menu bermula dengan 'pautan tentang' dalam keadaan lalainya dan secara dinamik menogol kelas aktif apabila item menu lain diklik, mematuhi fungsi yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan jQuery untuk Togol Kelas Aktif Tunggal secara Dinamik pada Item Menu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!