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

Тема в разделе "JavaScript", создана пользователем danneo, 4 янв 2015.

Модераторы: ZiX
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.421
    Симпатии:
    109
    Нужно сделать у большой статьи многоуровневое оглавление (с якорями на подзаголовки), с отступами и т.п., как в word.
    Простые способы видел, а вот чтобы многоуровневое, не нашел.
    Может быть есть готовые решения?
     
  2. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Не понял, при чём здесь jQuery.
    Это просто html разметка — ссылки такие же как ссылки на страницы, только используются якоря («a name=").
    А многоуровневое меню помощью ul-li со ссылками внутри.
    Отображение этого меню уже может задаваться и выпадающим, например с помощью css — например Pure CSS Menu.com : Free CSS Drop Down Menu Generator или здесь много меню: http://www.cssplay.co.uk/menus/
    Якоря широко используются в движке Википедии, можете подсмотреть там, как работает.
     
    pozhisni нравится это.
  3. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.421
    Симпатии:
    109
    как причем? В статье есть заголовки h2, h3, h4. Нужно сделать оглавление вначале статьи, как делает word. Чтобы это не вручную делать.
     
  4. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Ну так посмотрите уже решения что я ссылки дал. Там нет jQuery — чистый CSS.
     
  5. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.421
    Симпатии:
    109
    причем тут css? Мне нужен jq. В статье нет оглавления. Его нужно создать, а затем уже оформлять css.
    Хотя, посидел я вчера весь вечер, сделал, то что нужно.
     
    Последнее редактирование: 9 янв 2015
  6. D'Jack

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    335
    Симпатии:
    109
  7. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    Если, например перебрать все подзаголовки 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>')
    });
    });
     
    Последнее редактирование: 6 фев 2015
  8. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.421
    Симпатии:
    109
    я примерно такое и сделал. Но мне нужно было более изощренное :) - Все анкорные ссылки должны быть в древовидной структуре (разные уровни).
     
  9. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    я лишь вектор мысли хотел дать в предыдущем посте))
    Если разные уровни можно как-нибудь так, например:
    Код:
    $(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 :)
     
    Последнее редактирование: 6 фев 2015
  10. aeronavtik

    aeronavtik Создатель

    Регистр.:
    15 июн 2006
    Сообщения:
    42
    Симпатии:
    28
    Подскажите, пожалуйста, как реализовать многоуровневое оглавление в этом варианте скрипта:
    Код:
    $(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>
    Заранее благодарен!
     
    Последнее редактирование: 28 июн 2015