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...
Artikel Terkait
class active in navigation
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.

Catatan Tambahan:

Saya menemukan kesulitan ketika menambah class active pada taxonomy, solusinya menggunakan kode dari https://stackoverflow.com/a/34547305 seperti dibawah ini:

    jQuery(function($) {
     var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
     $('ul a').each(function() {
      if (this.href === path) {
       $(this).addClass('active');
      }
     });
    });

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Artikel Terkait

inspiradio
Tombol play dan stop audio
Kode untuk membuat tombol play dan stop audio
oxygen builder meta query product on sale
Oxygen Builder Repeater - Woocommerce Product On Sale
Catatan: Lihat gambar diatas (Oxygen Builder Advanced Query), dan jangan lupa menambahkan query: post_type : product posts_per_page : -1 // […]
Kode One Page Scroll
Demo kode dibawah ini bisa anda lihat pada halaman Demo Onepage Scroll. Kode HTML Kode Javascript Kode CSS Sumber: https://github.com/peachananr/onepage-scroll
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross