javascript - Berkenaan masalah butang radio, saya seorang yang baru, saya harap ada yang boleh membantu saya.

Question

Syarikat ingin membuat halaman acara dengan 4 butang Apabila butang diklik, ia bersamaan dengan keadaan yang dipilih dan imej latar belakang ditukar.

Cara memulihkan yang sebelumnya kepada keadaan asal apabila mengklik yang seterusnya.

Answer 1

Imej butang ditulis ke dalam imej latar belakang, dan yang dipilih ditambah dengan kelas untuk menutup imej

Answer 2

Alat penyuntingan ini, saya rasa ia mungkin dw. . . Kemudian kod ini juga mendedahkan nafas segar.
Pertama sekali, izinkan saya memberitahu anda, ini bukan cara anda menulis tentang penukaran Hanya sebilangan kecil penanam syaitan boleh menulis dengan cara ini, dan ia tidak formal. Kami pertapa umumnya mencapai matlamat kami dengan mengubah suai kelas.
Tulisan ringkas:

<p class="item">
    <img src="unchoose.png" class="unchoImg" >
    <img src="choose.png" class="choImg">
</p>

<style>
.choImg{
    display : none;
}

.choose .unchoImg{
    display : none;
}

.choose .choImg{
    display : block;
}
</style>

Pada masa ini, kita boleh mencapai tujuan yang sepadan dengan mengendalikan nama kelas "pilih" melalui js.

Answer 3

Pertama sekali, IMG anda tidak mempunyai ID Mengapa anda menulis ID ini jika anda ingin menggunakan kawalan ID, tambah ID dahulu...
Kemudian anda boleh menggayakan kedua-duanya. butang dan pilih satu daripada yang tidak dipilih. Kemudian gunakan js untuk mengawal apabila butang diklik untuk menambah gaya yang dipilih pada CSS butang, dan kemudian mengosongkan gaya yang dipilih daripada butang lain.

Answer 4

css:

.btn {
    background-image:url(default);
}

.btn.sel {
    background-image:url(sel.png);
}

javascript:

//step1 清除所有含有sel按钮的sel样式 $('.btn.sel').removeClass('sel');
//step2 给当前触发事件的btn增加sel样式 $(this).addClass('sel')