Содержание страницы на основе тега h2

[kpripper]

Как можно сделать автоматический вывод в статье чего-то вроде содержания, как в Википедии, чтобы пункты содержания брались из тегов h2 (к примеру) ?

[Николя223]

Это на php делается, но можно сделать и на jQuery, У H2 нужен ID для якоря. можно самому создать, а можно вообще программно хоть до чего прокручивать

http://jsfiddle.net/x7PT2/2/

Edited August 17, 2013 by Николя223

[efendi]

Это на php делается, но можно сделать и на jQuery, У H2 нужен ID для якоря. можно самому создать, а можно вообще программно хоть до чего прокручивать

http://jsfiddle.net/x7PT2/2/

Можно ли сделать подобное только без идентификаторов и классов? Есть ли другие способы?

[illya_v]

 

Это на php делается, но можно сделать и на jQuery, У H2 нужен ID для якоря. можно самому создать, а можно вообще программно хоть до чего прокручивать

http://jsfiddle.net/x7PT2/2/

Можно ли сделать подобное только без идентификаторов и классов? Есть ли другие способы?

 

Поясните пожалуйста, что значит "без идентификаторов и классов".

Нельзя использовать эти атрибуты конкретно в тегах заголовков, или вообще нет возможности произвести дополнительную разметку контента? Или что-то еще?

В любом случае опишите задачу которую вы решаете.

[efendi]

 

 

Это на php делается, но можно сделать и на jQuery, У H2 нужен ID для якоря. можно самому создать, а можно вообще программно хоть до чего прокручивать

http://jsfiddle.net/x7PT2/2/

Можно ли сделать подобное только без идентификаторов и классов? Есть ли другие способы?

 

Поясните пожалуйста, что значит "без идентификаторов и классов".

Нельзя использовать эти атрибуты конкретно в тегах заголовков, или вообще нет возможности произвести дополнительную разметку контента? Или что-то еще?

В любом случае опишите задачу которую вы решаете.

 

Сейчас код содержания такой:

<ol><li><a href="#nav1">Область применения и виды</a></li></ol>

Исходный код в теле статьи:

<h2 id="nav1">Область применения и виды</h2>

Нужно получить исходный код такой:

<h2>Область применения и виды</h2>

Edited February 1, 2014 by efendi

[illya_v]

А по какому признаку будут сопоставляться заголовки и элементы списка? Только по контенту?

В таком случае думаю нужно использовать js.

Первое что пришло на ум: определяете положение каждого заголовка по вертикали, и при нажатии на элемент списка делаете вертикальный скрол к нужному заголовку.

Это конечно весьма расплывчатый алгоритм, но ключевые моменты все же обозначены.

[efendi]

Ребята, я уже нашёл решение своей проблемы в этом посте у Евгения Попова http://ruseller.com/lessons.php?rub=32&id=767.

Но мне ещё нужно сделать, чтобы список содержания был нумерованный. (Обращался в техподдержку Е.Попова, там отказали, мотировав тем, что это не форум, и на вопросы в комментариях не отвечают!)

Я не разбираюсь в коде javascript. Помогите пожалуйста внедрить элементы <ol>, <li> в этот код:

$(document).ready(function() {		$("#toc").append('<span>Содержание статьи:</span>')		$("h2, h3, h4").each(function(i) {			var current = $(this);			current.attr("id", "title" + i);			$("#toc").append("<a id='link" + i + "' href='#title" + i + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a>");		});	});

Друзья, очень нуждаюсь в вашей помощи. Буду очень благодарен!

[illya_v]

Николя223 предложил похожее с тем что у вас  решение, за исключением того что у вас id для заголовков генерируются в самой скрипте.

Это должно вам подойти:

$(document).ready(function() {                var $content = $("#content"),                    $sidebar = $("#toc"),                    $list  = $( "<ol></ol>" );                                $sidebar.append('<span>Содержание статьи:</span>');                $sidebar.append( $list );                $("h1, h2, h3, h4", $content ).each(function(i) {                  var $current = $(this);                  $current.attr("id", "title" + i);                  $list.append("<li><a id='link" + i + "' href='#title" + i + "' title='" + $current.attr("tagName") + "'>" + $current.html() + "</a>");                });});

Обратите внимание, что весь текст, для которого нужно генерировать содержание, должен находиться внутри элемента с id="content", а оглавление будет помещено в элемент с id="toc".

Edited February 10, 2014 by illya_v