В этой статье разберём рецпет создания простого скрипта на JavaScript для динамического создания оглавления (содержания) к статьям на сайте.
Шаги по созданию оглавления для сайта
Основные действия по созданию списка заголовков на JavaScript с использованием jQuery:
1. Выбираем элементы, на основании которых нужно создать оглавление. Например, это элементы h2
расположенные в элементе .article
:
var headers = $('.article h2');
2. Создаём элемент, который будет представлять наше оглавление. Например, нумерованный список:
var output = $('<ol>');
3. Переберём все элементы, из которых нужно создать оглавление с помощью метода each:
headers.each(function (index) { // ... }
В этом коде index
– это индекс элемента в наборе headers
.
4. Добавим к h2
свойство id
, если у него его нет:
if (this.id === '') { this.id = 'id-' + index; }
Ключевое слово this
указывает на текущий элемент набора headers
.
5. Добавим в ol
элемент, содержащий один пункт оглавления. Это будет li
, внутрь которого помещена ссылка с текстом этого заголовка. С помощью ссылки можно будет перейти к этому разделу.
Код:
output.append($('<li>').append( $('<a>', { href: location.href.split('#')[0] + '#' + this.id }).text($(this).text())) );
6. Вставим полученное оглавление в нужное место страницы. Например, после h1
:
$('h1').after( $('<div>', { class: 'article-contents' }) .append($('<div>', { style: 'font-weight: bold;' }).text('Содержание:')) .append(output) );
Скрипт для создания оглавления на JavaScript с использованием jQuery
Итоговый скрипт:
var headers = $('.article h2'), output = $('<ol>'); headers.each(function (index) { if (this.id === '') { this.id = 'id-' + index; } output.append($('<li>').append( $('<a>', { href: location.href.split('#')[0] + '#' + this.id }).text($(this).text())) ); }); $('h1').after( $('<div>', { class: 'article-contents' }) .append($('<div>', { style: 'font-weight: bold;' }).text('Содержание:')) .append(output) );
Скрипт для автоматической генерации содержания без использования jQuery
Тот же самый скрипт, но без использования jQuery:
var output = document.createDocumentFragment(), headers = document.querySelectorAll('.article h2'), wrapper = document.createElement('div'), title = document.createElement('div'), ol = document.createElement('ol'), h1 = document.querySelector('h1'); wrapper.classList.add('article-content'); title.style.fontWeight = 'bold'; title.textContent = 'Содержание:'; output.appendChild(wrapper); wrapper.appendChild(title); wrapper.appendChild(ol); headers.forEach(function (item, index) { var li = document.createElement('li'), link = document.createElement('a'); if (item.id === '') { item.id = 'id-' + index; } link.href = location.href.split('#')[0] + '#' + item.id; link.textContent = item.textContent; li.appendChild(link); ol.appendChild(li); }); h1.after(output);
Скрипт для генерации содержания страницы с подсветкой пунктов
Пример, в котором показано как можно программно создать содержание для страницы с подсветкой пунктов и плавным скроллом:
Открыть примерУказание активного пункта в содержании осуществляется посредством добавления к нему (элементу li
) класса active
.
<div class="article-contents"> ... <ul> <li>...</li> <li>...</li> <!-- активный пункт к меню --> <li class="active">...</li> <li>...</li> <li>...</li> </ul> </div>
Но хорошо бы доработать штуку так, что бы в нем уже был и мягкий скролл и может там подсветка какая-то пунктов прикрепляемого меню)))