Membuat Anchor tag Otomatis dengan jQuery

Pemanfaatan JQuery library kali ini adalah dengan membuat perintah javascript agar dapat secara secara otomatis menambahkan anchor tag pada masing-masing heading yang ada di halaman web.

Untuk yang belum tau, anchor tag merupakan trik yang kerap digunakan sebagai tautan langsung ke bagian tertentu dalam artikel di halaman web, salah satunya dapat berupa daftar isi atau ToC/Table of Contents

Contoh kasus; heading dengan judul ‘Cara Membuat Anchor tag‘ di halaman www.domain.com/page/ akan otomatis berubah dari

<h1>Cara Membuat Anchor tag</h1>

menjadi

<h1 id='cara membuat anchor tag'>Cara Membuat Anchor tag</h1>

Setelah masing-masing heading (dapat berupa h1, h2, h3, h4, h5, atau h6) yang terdapat di dalam artikel di generate otomatis untuk ditambahkan id=’… seperti pada contoh diatas anda dapat memanggil bagian heading tersebut dengan link

www.domain.com/page/#cara membuat anchor tag

Baris perintah javascript yang memanfaatkan JQuery library dibawah ini akan:

  • dieksekusi setelah halaman web selesai dimuat
  • target heading H1 sampai H6 adalah hanya yang berada di dalam article (jika tidak/belum, anda harus mengubah/menyesuaikan ini dengan situs web Anda)
  • mengambil masing-masing judul di dalam heading dan dibuat menjadi nama id dengan menggunakan teks huruf kecil (serta mengganti spasi, dan menghapus tanda baca yang dapat memutus penulisan link, seperti tanda tanya)
Untuk penggunaan di WordPress, anda harus mengganti simbol dolar ( $ ) dengan jQuery.
$(document).ready(function() {
$("article h1, article h2, article h3, article h4, article h5, article h5").each(function(i) {
 var heading = $(this);
 var headingtext = heading.text().toLowerCase().trim().replace(/[\.,-\/#!?$%\^&\*;:{}=\-_`~()]/g,"");
 heading.attr("id",headingtext );
 });
});
#Anchor tag#jQuery Library

Tinggalkan Balasan

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.