Wie lässt sich ein Lesezeichen-System für Bibelstellen in HTML realisieren?
- Grundidee und Umsetzung
- HTML-Struktur der Bibelstellen
- Speichern und Verwalten der Lesezeichen per JavaScript
- Vollständiger Beispiel-Code mit JavaScript für Lesezeichen-Funktion
- Komponenten für die Lesezeichen-Anzeige
- Gespeicherte Lesezeichen
Ein Lesezeichen-System in HTML dient dazu, bestimmte Bibelstellen im Dokument zu markieren, zu speichern und schnell wieder auf sie zugreifen zu können. Dies kann vor allem bei längeren Texten oder Studien hilfreich sein. Im Folgenden wird erläutert, wie so ein System aufgebaut werden kann, komplett in HTML, CSS und JavaScript. Es nutzt Ansätze wie das Setzen von Ankerpunkten im Dokument, lokale Speicherung (LocalStorage) und dynamisches Anzeigen der gespeicherten Lesezeichen.
Grundidee und Umsetzung
Im Dokument selbst werden die Bibelstellen als Absätze oder Abschnitte mit eindeutigen IDs versehen, damit man sie referenzieren kann. Neben jeder Bibelstelle befindet sich ein Button Lesezeichen setzen, der beim Klicken das entsprechende Element als Lesezeichen in den LocalStorage des Browsers speichert. Alle gespeicherten Lesezeichen werden in einer Liste am Seitenende angezeigt und können per Klick direkt angesprungen oder gelöscht werden.
HTML-Struktur der Bibelstellen
Jede Bibelstelle bekommt ein Element (zum Beispiel ein Paragraph mit einer ID), das eindeutig ist. Der Button hat ein Dataset-Attribut, um zu wissen, welche ID gemerkt werden soll. Beispielsweise:
Johannes 3,16 Denn also hat Gott die Welt geliebt, dass er seinen eingeborenen Sohn gab, damit alle, die an ihn glauben, nicht verloren werden, sondern das ewige Leben haben.
Speichern und Verwalten der Lesezeichen per JavaScript
Beim Klick auf den Lesezeichen setzen-Button sorgt JavaScript dafür, dass die ID der Bibelstelle in einem Array im LocalStorage gespeichert wird. Doppelte Einträge werden vermieden. Danach wird die Anzeige der aktuellen Lesezeichen aktualisiert. Gleichzeitig kann man über die Liste navigieren oder einzelne Lesezeichen entfernen.
Vollständiger Beispiel-Code mit JavaScript für Lesezeichen-Funktion
Hier sehen Sie den eingebauten JavaScript-Code, der die Interaktion steuert:
const bookmarkButtons = document.querySelectorAll(.bookmark-btn);const bookmarksList = document.getElementById(bookmarksList);const clearAllBtn = document.getElementById(clearAllBtn);// Lade gespeicherte Lesezeichen aus LocalStorage oder initialisiere mit leerem Arrayfunction loadBookmarks() { const bookmarks = JSON.parse(localStorage.getItem(bibelLesezeichen) || ); return bookmarks;}// Speichere Lesezeichen im LocalStoragefunction saveBookmarks(bookmarks) { localStorage.setItem(bibelLesezeichen, JSON.stringify(bookmarks));}// Zeige Lesezeichen in der Liste anfunction renderBookmarks() { const bookmarks = loadBookmarks(); bookmarksList.innerHTML = ; if(bookmarks.length === 0){ bookmarksList.innerHTML = <i>Keine Lesezeichen gesetzt.</i>; clearAllBtn.style.display = none; return; } clearAllBtn.style.display = inline-block; bookmarks.forEach(ref => { const elem = document.getElementById(ref); if(!elem) return; const item = document.createElement(div); item.className = bookmark-item; const link = document.createElement(a); link.href = # + ref; link.textContent = elem.querySelector(strong)?.textContent || ref; link.className = bookmark-link; // Entfernen-Knopf const removeBtn = document.createElement(button); removeBtn.textContent = ×; removeBtn.title = Lesezeichen entfernen; removeBtn.className = remove-btn; removeBtn.addEventListener(click, (e) => { e.preventDefault(); removeBookmark(ref); }); item.appendChild(link); item.appendChild(removeBtn); bookmarksList.appendChild(item); });}// Füge Lesezeichen hinzu, vermeide Duplikatefunction addBookmark(ref) { let bookmarks = loadBookmarks(); if(!bookmarks.includes(ref)) { bookmarks.push(ref); saveBookmarks(bookmarks); renderBookmarks(); }}// Entferne ein einzelnes Lesezeichenfunction removeBookmark(ref) { let bookmarks = loadBookmarks(); bookmarks = bookmarks.filter(b => b !== ref); saveBookmarks(bookmarks); renderBookmarks();}// Alle Lesezeichen löschenfunction clearBookmarks() { localStorage.removeItem(bibelLesezeichen); renderBookmarks();}// Button-Events registrierenbookmarkButtons.forEach(btn => { btn.addEventListener(click, () => { const ref = btn.dataset.ref; addBookmark(ref); });});clearAllBtn.addEventListener(click, () => { if(confirm(Alle Lesezeichen wirklich löschen?)) { clearBookmarks(); }});// Initiales Laden der LesezeichenrenderBookmarks();