Buongiorno a tutti, sto cercando il modo di creare, per il mio sito in ristrutturazione, una pagina indice che raccolga, in automatico, tutti i titoli in h2 degli argomenti delle varie pagine.
Finora sono solo riuscita a creare un sommario interno relativo alla singola pagina, utilizzando il codice che vedete più sotto e che funziona molto bene. Dato che il mio sito è un sito di guide e ha quasi 200 pagine, quello che vorrei è poter offrire agli utenti una mappa degli argomenti di tutto il sito, suddivisi per pagina e cliccabili e che si aggiorni in automatico quando, in una data pagina, viene aggiunto un nuovo titolo h2. Esiste un modo per ottenere questo con Javascript, o sto chiedendo troppo? Grazie mille per l'attenzione..
<script type='text/javascript'>
$(function(){
(function($) {
$.fn.autoToc = function(options) {
var settings = {
titles: 'h2',
section: 'section',
text: 'Sommario'
};
options = $.extend(settings, options);
return this.each(function() {
var element = $(this);
var html = '<div id="toc"><h3>' + options.text + '</h3><ul>';
$(options.titles, element).each(function(i) {
var title = $(this);
title.attr('id', options.section + '-' + (i + 1));
html += '<li><a href="#' + options.section + '-' + (i + 1) + '">' + title.text() + '</a></li>';
});
html += '</ul></div>';
$(html).insertBefore($(options.titles + ':first', element));
});
};
$(function() {
$('body').autoToc();
});
})(jQuery);
});
</script>
Rispondi quotando
Originariamente inviata da m4rko80
