Hallo Sahabat, bagaimana kabarnya semoga selalu sehat serta tetap semangat. Dalam artikel ini saya akan membahas tentang bagaimana cara membuat efek underline menu tabs dengan jQuery. Jadi saat pilih menu lain akan ada efek underline yang menandakan bahwa tabs yang dipilih sedang aktif.

Dalam kasus ini tentunya tidak perlu diterka-terka bagaimana cara membuatnya, yuk langsung aja ke tkp.

Baiklah yang perlu dipersiapkan yaitu text editor sahabat sudah siap tempurkan. Buat file yang berisi HTML sebagai langkah awal seperti code berikut ini:

Pada code diatas saya menambahkan beberapa gambar untuk content tampilannya, jadi sahabat hanya perlu focus pada

  • setelah class=tabĀ yang berisi list menu tabs nya.
  • untuk class=contentĀ isi content dari setiap menu nya

Lalu selanjutnya jangan lupa sebuah style CSS agar tampilan terlihat rapih dan menarik silahkan ketikkan code CSS berikut ini:

Oke selanjutnya bagian yang terpenting adalah script dari jquery seperti code dibawah ini

Jadi saat menu tabs di click maka menu tersebut yang dianggap aktif, sehingga akan menampilkan content sesuai urutan index dan ada sebuah efek underline pada tabs yang aktif.

Saya kira cukup pembahasan kita dalam artikel Cara Membuat Efek Underline Menu Tabs Dengan jQuery. Semoga bermanfaat dan terima kasih.