Главная » Блоги » блог teerex

Автоматическое добавление якорей (содержание) на основе заголовков (h2) в контенте

25 Январь, 2012 - 10:35, teerex

Код на Javascript под jquery, но алгоритм понятен и не должно составить труда адаптировать под другие языки.

Описание

В коде html элемента с id="mainCol" ищутся заголовки h2 и перед заголовками добавляются якоря. Ссылки на якоря выносятся в элемент id="subNav".
Пример активен на этой странице.

Код примера

<script type="text/javascript">
  $(document).ready(function(){
  $('#mainCol h2').each(function(){
  var thisText = $(this).text();
  var anchorText = thisText.replace(/ /g, "-");
  var anchorLink = '<a name="' + anchorText + '"></a>';
  var anchorText = '<a href="#' + anchorText + '">' + thisText + '</a><br />'; 
  $(this).before(anchorLink);
  $(anchorText).appendTo('#subNav');
  });
  });
</script>

Метки:

# | Игорь (?)

анонимус аватар

Как сделать чтобы оглавление получалось нумерованным ?
вот так -
1. Описание
2. Код примера

29 Декабрь, 2014 - 11:57

Оставить комментарий

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

Подробнее о форматировании

КАПЧА
А ты не робот? Введи 5 цифр
                                                                        
   ad8888ba,    ad88888ba            ,d8     8888888888    8888888888   
  8P'    "Y8   d8"     "88         ,d888     88            88           
 d8            8P       88       ,d8" 88     88  ____      88  ____     
 88,dd888bb,   Y8,    ,d88     ,d8"   88     88a8PPPP8b,   88a8PPPP8b,  
 88P'    `8b    "PPPPPP"88   ,d8"     88     PP"     `8b   PP"     `8b  
 88       d8            8P   8888888888888            d8            d8  
 88a     a8P   8b,    a8P             88     Y8a     a8P   Y8a     a8P  
  "Y88888P"    `"Y8888P'              88      "Y88888P"     "Y88888P"
Enter the code depicted in ASCII art style.
To prevent automated spam submissions leave this field empty.