Dynamisches Inhaltsverzeichnis mit jQuery

The times they are a-changin’.

This post seems to be older than 5 years—a long time on the internet. It might be outdated.

Neulich hatten wir hier ein einfaches Glossar mit WordPress-Bordmitteln im Editor erstellt. Heute gibt‘s die Automatisierung! Das folgende jQuery-Schnäppchen generiert ein Inhaltsverzeichnis aller auf der Seite befindlichen Überschriften, inklusive klickbarer Links und weichem Scroll-Effekt.

Vorteil: Das Inhaltsverzeichnis braucht nicht mit gepflegt zu werden. Auch die IDs der Überschriften passieren von alleine – komfortabel für Freunde des WYSIWYG-Editors!

Selektoren

Vielleicht wird irgendwann mal ein echtes jQuery-Plugin draus; momentan stehen die relevanten Selektoren noch fix im Code und müssen bei Bedarf dort angepasst werden.

.entry-content – das Element für den Hauptinhalt der Seite bzw. des Artikels
.entry-content h3 – alle Überschriften 3. Ordnung im Seiteninhalt werden abgefragt
#indexitem-1[,2,3…] – dynamisch erstellte IDs für die vorhandenen <h3>-Elemente
.indexlist – CSS-Klasse der dynamisch erstellen Liste
.indexlist a – Selektor für den Scroll-Effekt; Zeile einfach auskommentieren, wenn nicht erwünscht
.before( '<br /><hr />' ) – fügt vor jeder Überschrift ein <hr>-Element ein; bitte ebenfalls einfach auskommentieren oder löschen, wenn nicht erwünscht

Der folgende Code gehört in eine Javascript-Datei, oder optional (innerhalb von <script>-Tags) in den Footer der Seite. Nicht vergessen: jQuery sollte bereits geladen sein! 😉

[code lang=“javascript“];(function ($) {
$(document).ready(function(){

$( ‚.entry-content‘ ).prepend(‚<ul class="&quot;indexlist&quot;"></ul>‘);
$( $( ‚.entry-content h3‘ ).get().reverse() ).each(function(index){
var itemindex = ( index + 1 );
$( this ).attr( ‚id‘, ‚indexitem-‚ + itemindex ).before( ‚<br /><hr />‘ );
$( ‚.indexlist‘ ).prepend( ‚<li><a>‘ + $( this ).text() + ‚</a></li>‘ );
$( ‚.indexlist a‘ ).inlineScrolling();
});
}

/* Funktion für sanftes Scrolling */
$.fn.inlineScrolling = function(options) {

return this.each(function(event) {

var $this = $(this);

$this.on(‚click‘, $this, function(event) {
var scrollTarget = $( ‚#‘ + this.href.split( ‚#‘ )[ 1 ] ).offset().top;
$( ‚html, body‘ ).animate( {
scrollTop : scrollTarget
}
, 250);
event.preventDefault();
return false;
});
});
}
}(jQuery));[/code]

Ergebnis

Das fertig generierte, dynamische Inhaltsverzeichnis kann z.B. so aussehen:

FAQ-Seite mit dynamisch generiertem Inhaltsverzeichnis

4 Antworten zu “Dynamisches Inhaltsverzeichnis mit jQuery

  1. Das sieht doch schon richtig nach einem echtem jQuery Plugin aus. Ich habe letzte Woche erst selbst die Erstellung von Plugins mit jQuery gelernt, da ich gerade eine Migration von Prototype auf jQuery für unsere große Website mache. Aber ich finde die Syntax im Gegensatz zu Prototype oder anderen Framworks eher grauenhaft unübersichtlich.

    Vielleicht kann ich ja sogar noch was von dir in der Hinsicht lernen. Aber wenn du eine Frage hast, dann weiß du ja wie du mich erreichst 😉

    • Andere Frameworks habe ich nie angefasst, muss ich gestehen. Deswegen bin ich mit jQuery auch sehr zufrieden. 😉 Für einen Frontend-Klempner wie mich ist es einfach eine Art schnell anwendbarer „Erweiterung“ von CSS. Beim letzten Projekt wurde es dann aber recht komplex, so dass ich etwas mehr Zeit in die Syntax investiert habe als bei früheren Anwendungen. Um ein richtiges Plugin draus zu machen, fehlte die Zeit – vielleicht, wenn ich in Rente bin. 😉

  2. Hallo,
    gibt es irgendwo ein kleines HTML-Beispiel dazu, wie dieses Skript im HTML verwendet wird? Ich erhalte einfach kein Inhaltsverzeichnis und mir fehlt ein Anhaltspunkt, wie die Struktur im HTML sein muss.

    Mit freundlichen Grüßen

    Jens Kalski

    • Hallo Jens,
      der ganz am Anfang erwähnte Beitrag Einfaches Glossar ohne Plugin dürfte Aufklärung schaffen. 😉

      EDIT: Hm, hab‘ gerade noch mal nachgesehen, ist vielleicht doch nicht ganz plausibel. Also: Das hier gezeigte Script erstellt am Anfang deines Beitrags eine HTML-Liste, in der automatisch die Links zu allen Überschriften dritter Ordnung aus dem Beitrag erscheinen. Dein Beitrag sollte also so aufgebaut sein:

      <h3>Überschrift</h3>
      Text …
      <h3>Überschrift</h3>
      Text …
      usw. …

      Wichtig ist natürlich, dass die Selektoren im Script stimmen. Falls der Inhalt deines Beitrag nicht die CSS-Klasse entry-content hat, müsstest du dies im Script anpassen.

Kommentare geschlossen.