@tolikryg

Как сделать Оглавления на сайте?

Привет Гуру веб технологий и простым людям. Вопрос такой, как мне сделать на javascript генератор оглавления на сайт?
Суть в том что на сайте для каждого абзаца генерируется блок с личным id, как мне сделать из этих id оглавление путем сбора и подстановки Названия из тега h3.
5a539eede64db442094755.png
Как можно увидеть, здесь для абзаца генерируется id, а в фото ниже, видно что в каждой секции есть тег h3.
5a539fb909078167239399.png

Нужно сделать так:

Оглавление:
Название заголовка (взятое из тега h3 и ссылка на абзац)
Название заголовка (взятое из тега h3 и ссылка на абзац)
Название заголовка (взятое из тега h3 и ссылка на абзац)

Заранее спасибо за помощь!!!
  • Вопрос задан
  • 166 просмотров
Решения вопроса 1
@tolikryg Автор вопроса
Все спасибо решение найдено:

Это полное решение для быстрого создания блока "Оглавления"!
Что решает этот код, он выводит в виде списка все заголовки h3 в том случае если их больше 2, если нет то он прячет весь блок
<div id="content_post" class="content-post"><p>Содержание</p><ul id="anchor_list"></ul></div>


Весь текст с заголовками должен находиться между тегов <article></article>
if($('article h3').length > 2) {$(document).ready(function() {
$('article h3').each(function(i) {
f=i+1;
anchor='anchor'+f;
$(this).attr('id', anchor);
t=$(this).text();
anchor_list='<li><a href=\"#'+anchor+'\">'+t+'</a></li>';
$('#anchor_list').append(anchor_list+'<br>')
});
}
);}
else{document.getElementById('content_post').style.display = 'none';}


А вот и стили:
.content-post {
      padding: 20px 0;
    }
     
    .content-post p {
      display: inline;
      font-weight: 700;
      font-size: 1.1em;
      color: #ef188e;
      margin-bottom: 5px;
      border-bottom: dotted 2px;
      cursor: pointer;
    }
     
    .content-post ul {
      margin-top: 20px;
      border: 4px dashed #ef188e;
      padding: 20px;
    }
     
    .content-post li {
      list-style: none;
      padding: 1px 0;
      font-weight: 700;
      font-size: 1em;
    }
     
    .content-post li a {
      border-bottom: solid 1px;
      text-decoration: none;
      color: #444;
    }


Это я пишу это для тех, кто не пользуется готовыми движками типа wp а использует самописный или без подобного функционала! Мне помогли и я вам помогу, спасибо за помощь jlay.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Alex-HAV
А у Вас случаем не WP?
Ответ написан
didiaFiodor
@didiaFiodor
а вы скажите ему об этом, раскройте ему глаза
<html>
<head>
<script>
function hcG(name)
{
if(hcG.cache!={})hcG.cache = {};
return hcG.cache[name]==undefined?hcG.cache[name]=document.getElementsByTagName(name):hcG.cache[name]=hcG.cache[name]
}
function iT()
{
for(var i=0;i<hcG.cache.h3.length;i++)
{hcG.cache.h3[i].innerText=hcG.cache.h3[i].id}
}
(
htmlc =hcG('h3'),
(htmlc),
this.onclick =function(){
iT();
}
)
</script>
</head>
<h3 id = "Hello World!">Tap</h3>
<h3 id = "Hi User!"></h3>
<h3 id = "Hello Woodpecker!"></h3>
</html>

Чтоб заработало для всех h3 нужно было добавить for (теперь я знаю, что вы совсем не пишите)
UDP Постарайтесь менее сбивчиво объяснить, что кроме этого вам нужно, если сможете, я помогу
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы