Как сделать на jquery многоуровневое оглавление?

[danneo]

Нужно сделать у большой статьи многоуровневое оглавление (с якорями на подзаголовки), с отступами и т.п., как в word.
Простые способы видел, а вот чтобы многоуровневое, не нашел.
Может быть есть готовые решения?

 

[Denixxx]

Не понял, при чём здесь jQuery.
Это просто html разметка — ссылки такие же как ссылки на страницы, только используются якоря («a name=").
А многоуровневое меню помощью ul-li со ссылками внутри.
Отображение этого меню уже может задаваться и выпадающим, например с помощью css — например Для просмотра ссылки Войди или Зарегистрируйся или здесь много меню: Для просмотра ссылки Войди или Зарегистрируйся
Якоря широко используются в движке Википедии, можете подсмотреть там, как работает.

 

[danneo]

Не понял, при чём здесь jQuery.
Это просто html разметка — ссылки такие же как ссылки на страницы, только используются якоря («a name=").
А многоуровневое меню помощью ul-li со ссылками внутри.
Отображение этого меню уже может задаваться и выпадающим, например с помощью css — например Для просмотра ссылки Войди или Зарегистрируйся или здесь много меню: Для просмотра ссылки Войди или Зарегистрируйся
Якоря широко используются в движке Википедии, можете подсмотреть там, как работает.

как причем? В статье есть заголовки h2, h3, h4. Нужно сделать оглавление вначале статьи, как делает word. Чтобы это не вручную делать.

 

[Denixxx]

Нужно сделать оглавление вначале статьи, как делает word. Чтобы это не вручную делать.

Ну так посмотрите уже решения что я ссылки дал. Там нет jQuery — чистый CSS.

 

[danneo]

Ну так посмотрите уже решения что я ссылки дал. Там нет jQuery — чистый CSS.

причем тут css? Мне нужен jq. В статье нет оглавления. Его нужно создать, а затем уже оформлять css.
Хотя, посидел я вчера весь вечер, сделал, то что нужно.

 

[D'Jack]

Есть в копилке вот такое Для просмотра ссылки Войди или Зарегистрируйся , может будет чем то полезно.

 

[Absolute]

Если, например перебрать все подзаголовки H2, добавить в них якоря, а после вывести списком (к примеру в элементе с id="anchor_list") со ссылками на якоря, то вот код:

$(document).ready(function() {
$('h2').each(function(i) {
f=i+1;
anchor='anchor'+f;
$(this).attr('id', anchor);
t=f+'. '+$(this).text();
anchor_list='<a href=\"#'+anchor+'\">'+t+'</a>';
$('#anchor_list').append(anchor_list+'<br>')
});
});

 

[danneo]

Если, например перебрать все подзаголовки H2, добавить в них якоря, а после вывести списком (к примеру в элементе с id="anchor_list") со ссылками на якоря, то вот код:

$(document).ready(function() {
$('h2').each(function(i) {
f=i+1;
anchor='anchor'+f;
$(this).attr('id', anchor);
t=f+'. '+$(this).text();
anchor_list='<a href=\"#'+anchor+'\">'+t+'</a>';
$('#anchor_list').append(anchor_list+'<br>')
});
});

я примерно такое и сделал. Но мне нужно было более изощренное - Все анкорные ссылки должны быть в древовидной структуре (разные уровни).

 

[Absolute]

Все анкорные ссылки должны быть в древовидной структуре (разные уровни).

я лишь вектор мысли хотел дать в предыдущем посте))
Если разные уровни можно как-нибудь так, например:

$(document).ready(function() {
$('h1, h2, h3').each(function(i) {
f=i+1;
anchor='anchor'+f;
$(this).attr('id', anchor);
tag=$(this)[0].tagName;
if(tag=='H2'){
margin=20;
}
else if(tag=='H3'){
margin=40;
}
else {
margin=0;
}
t=$(this).text();
anchor_list='<a style=\"margin-left:'+margin+'px\" href=\"#'+anchor+'\">'+t+'</a>';
$('#anchor_list').append(anchor_list+'<br>')
});
});

Можно и деревом оформить. Тут всё вашей только фантазией ограничивается и некоторыми знаниями css

 

[aeronavtik]

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

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

<div id="toc"></div>

Заранее благодарен!