set jquery li dipilih-Soal Jawab bahagian hadapan-php.cn

set jquery li dipilih

WBOY

Lepaskan： 2023-05-12 11:06:36

asal

1058 orang telah melayarinya

Apabila menggunakan jQuery untuk pembangunan halaman, selalunya perlu menetapkan keadaan terpilih bagi elemen li tertentu dalam senarai. Tetapan ini sangat penting untuk sesetengah halaman yang memerlukan penukaran keadaan. Artikel ini akan menerangkan cara menetapkan keadaan li yang dipilih menggunakan jQuery.

Pertama sekali, kita perlu jelas: untuk menetapkan keadaan li yang dipilih, kita perlu menentukan gaya dan kemudian menggunakan gaya pada elemen li yang diperlukan melalui jQuery. Dengan cara ini, apabila kita mengklik pada elemen li untuk dipilih, kita boleh menukar keadaan yang dipilih dengan menambah atau memadam gaya.

Berikut ialah contoh kod:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置li选中状态</title>
    <style type="text/css">
        .selected {
            background-color: #f5f5f5;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('ul li').click(function() {
                $('ul li').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
</body>
</html>

Salin selepas log masuk

Kod di atas melaksanakan senarai pilihan mudah dan menambah gaya untuk keadaan yang dipilih. Apabila kita mengklik pada pilihan dalam senarai, keadaan yang dipilih ditukar melalui kod jQuery.

Khususnya, kami menggunakan kaedah click() jQuery untuk mendengar acara klik setiap elemen li, dan kemudian dalam fungsi pengendali acara, mula-mula keluarkan gaya yang dipilih bagi semua elemen li dalam senarai, dan kemudian The gaya yang dipilih ditambahkan pada elemen li yang sedang diklik untuk menukar keadaan yang dipilih.

Perkara lain yang perlu diambil perhatian ialah kami menggunakan kaedah addClass() dan removeClass() untuk menambah dan mengalih keluar kelas CSS supaya kelas CSS tertentu boleh dipratakrifkan dalam helaian gaya dan kemudian digunakan dalam nama jQuery mengawal gaya keadaan yang dipilih.

Dalam proses pembangunan sebenar, pemilih juga boleh diubah dan disesuaikan secara fleksibel mengikut keperluan sebenar. Sebagai contoh, kita boleh memilih elemen li untuk dikendalikan melalui pelbagai kaedah seperti ID, atribut, nama tag, dll. Kami juga boleh mengendalikan logik yang lebih kompleks dengan menggabungkan atribut tersuai, atribut data, dsb.

Ringkasnya, sangat mudah untuk menggunakan jQuery untuk menetapkan keadaan li yang dipilih Anda hanya perlu menguasai beberapa pengetahuan asas jQuery untuk melaksanakan komponen yang memerlukan penukaran keadaan seperti senarai pilihan.

Atas ialah kandungan terperinci set jquery li dipilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!