Menambahkan dan Menghapus Class Active dengan JavaScript
Dalam pengembangan web, seringkali kita ingin mengubah tampilan elemen HTML ketika diklik. Salah satu caranya adalah dengan menambahkan dan menghapus kelas CSS 'active' pada elemen tersebut. Artikel ini akan membahas bagaimana melakukan hal tersebut dengan JavaScript.
Menambahkan Class Active
Untuk menambahkan kelas 'active' pada elemen ketika diklik, kita bisa menggunakan metode classList.add() dari JavaScript. Berikut contohnya:
const element = document.getElementById("myElement");
element.addEventListener("click", function() {
this.classList.add("active");
});
Kode di atas akan menambahkan kelas 'active' pada elemen dengan ID 'myElement' ketika diklik.
Menghapus Class Active
Untuk menghapus kelas 'active' dari elemen, kita bisa menggunakan metode classList.remove() dari JavaScript. Berikut contohnya:
const element = document.getElementById("myElement");
element.addEventListener("click", function() {
this.classList.toggle("active");
});
Kode di atas akan menambahkan kelas 'active' jika elemen belum memilikinya, dan menghapusnya jika elemen sudah memilikinya.
Menggabungkan Kedua Fungsi
Kita dapat menggabungkan kedua fungsi di atas untuk membuat toggle yang sederhana. Contoh:
const element = document.getElementById("myElement");
element.addEventListener("click", function() {
this.classList.toggle("active");
});
Kode di atas akan menambahkan kelas 'active' pada elemen ketika diklik pertama kali, dan menghapusnya ketika diklik kedua kali.
Contoh Penggunaan
Misalnya, kita ingin membuat tombol navigasi yang berubah warna ketika diklik. Kita bisa menggunakan JavaScript untuk menambahkan dan menghapus kelas 'active' pada tombol tersebut. Berikut contohnya:
Kode di atas akan menambahkan kelas 'active' pada tombol yang diklik, dan menghapusnya dari tombol lainnya. Hal ini akan membuat tombol yang diklik tampak berbeda dari tombol lainnya.
Kesimpulan
Menambahkan dan menghapus kelas 'active' dengan JavaScript adalah cara mudah untuk mengubah tampilan elemen HTML ketika diklik. Dengan menggunakan metode classList.add(), classList.remove(), dan classList.toggle(), kita dapat membuat toggle sederhana yang mengubah tampilan elemen secara dinamis.