Add Active Class Onclick Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

35

Share

Menambahkan Kelas Aktif dengan onclick di JavaScript

Dalam pengembangan web, seringkali kita perlu menandai elemen yang sedang aktif atau dipilih oleh pengguna. Salah satu cara untuk melakukannya adalah dengan menambahkan kelas CSS yang disebut "aktif" ke elemen tersebut. Artikel ini akan membahas cara menambahkan kelas aktif dengan menggunakan atribut onclick di JavaScript.

Cara Kerja

1. Tentukan Elemen Target: Identifikasi elemen HTML yang akan menjadi target penambahan kelas aktif.
2. Tambahkan Atribut onclick: Berikan atribut onclick ke elemen target. Atribut ini akan berisi fungsi JavaScript yang akan dijalankan saat elemen diklik.
3. Fungsi JavaScript: Dalam fungsi JavaScript, gunakan metode classList.add() untuk menambahkan kelas "aktif" ke elemen target.
4. Tambahkan Kelas aktif: Tambahkan kelas aktif ke style sheet CSS Anda. Kelas ini akan berisi style yang akan diterapkan ke elemen yang diberi kelas "aktif".

Contoh

Berikut contoh kode HTML dan JavaScript sederhana untuk menambahkan kelas aktif ke elemen <li>:

  
Item 1
  
Item 2
  
Item 3

Penjelasan Kode:

• Elemen Target: Elemen target adalah <li> yang memiliki atribut onclick.
• Atribut onclick: Atribut ini memanggil fungsi addActive() dan mengirimkan elemen <li> sebagai argumen.
• Fungsi addActive():
  • Fungsi ini menerima elemen <li> sebagai argumen.
  • Fungsi menggunakan element.classList.add("aktif") untuk menambahkan kelas "aktif" ke elemen yang diklik.
• Kelas aktif: Kelas ini didefinisikan dalam CSS untuk memberikan warna latar belakang biru muda ke elemen yang diberi kelas "aktif".

Kesimpulan

Menambahkan kelas aktif dengan onclick di JavaScript adalah teknik sederhana dan efektif untuk menandai elemen yang dipilih. Dengan menggunakan metode classList.add(), Anda dapat dengan mudah mengubah tampilan elemen dan memberikan umpan balik visual yang jelas kepada pengguna.