Menambahkan class active pada navigasi aktif dengan jQuery

Potongan kode untuk menambahkan class active pada menu navigasi yang aktif.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
class active in navigation
Updated: 8 Oktober 2021
jQuery(function() {
	if ( window.location.pathname == '/' ){
    		jQuery('.home_link').addClass('active');
	} 
	else {
		jQuery('.main-menu_classes a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
	}
});

Penjelasan singkat kode "Menambahkan class active pada navigasi aktif dengan jQuery"

Saya menambahkan class active pada menu HOME atau BERANDA (yang sudah saya tandai dengan class home_link) khusus untuk halaman homepage saja. Jika browser membuka halaman selain homepage, maka class active akan ditambahkan pada menu sesuai dengan link yang sedang kita buka.

Misalkan kita membuka halaman ABOUT, maka link /about/ akan ditambahkan class active.

Contoh penggunaan script ini saya gunakan ketika mengkonversi website https://www.ibeemusic.id yang sebelumnya menggunakan Elementor, kemudian dikonversi menggunakan Oxygen Builder.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait Lainnya
Menambah CLASS setelah halaman terbuka
Potongan kode javascript ini untuk menambahkan class pada suatu element setelah halaman selesai halaman terbuka / meload DOM. Salah satu […]
Baca selengkapnya....
Efek membesar CSS
Kode CSS ini untuk meng-animasikan pembesaran elemen yang menggunakan class grow.
Baca selengkapnya....
Menu Navigasi
Kode (Function) untuk memunculkan daftar menu pada WordPress
Baca selengkapnya....
Menonaktifkan Notifikasi Auto Update Plugin
Membatasi jumlah kata pada kutipan (excerpt) artikel
Kode untuk membatasi jumlah kata pada kutipan (excerpt) artikel
Baca selengkapnya....
Kembali ke atas
logo digitalizer
© 2011 - 2022 Digitalizer My ID - Allright Reserved
cross