Есть скрипт TOC который создает оглавление для страницы. Но на данный момент скрипт обрабатывает всю страницу, как сделать что бы он проверял только определеный блок с каким нибудь классом?
-
как ты его используешь?– Grundy ♦23 ноя 2016 в 13:32
-
На сайте как обычно, прикрепил скрипт и использую.– Anatoliy25 ноя 2016 в 14:03
-
нужен пример кода. В вопрос можно вставить сниппет и продемонстрировать как это сейчас работает– Grundy ♦25 ноя 2016 в 14:06
-
Сделал пример: codepen.io/AnatoliyAV/pen/qqjzWX?editors=1010– Anatoliy25 ноя 2016 в 16:00
1 ответ
У плагина есть опция
selector
(default value is h1, h2, h3, h4, h5, h6): указывает какие элементы будут добавлены в таблицу.
Как можно заметить, значение по умолчанию - список заголовков, но так как в самом коде плагина они выбираются с помощь $(this.options.selector)
, то выбраны будут все подходящие элементы на странице.
Чтобы ограничить их, нужно просто поменять значение этой опции.
Например так:
$(document).ready(function() {
$('#toc').toc({
selector: '#content h1,#content h2,#content h3,#content h4',
elementClass: 'toc',
ulClass: 'nav',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/nghuuphuoc/tocjs/master/dist/js/toc.min.js"></script>
<h1>Меня брать не надо</h1>
<div id="content" title="Брать заголовки только из этого блока">
<h1>Меня надо взять</h1>
<p>text text text text text text text text</p>
<h2>И меня 1</h2>
<p>text text text text text text text text</p>
<h3>И меня 2</h3>
<p>text text text text text text text text</p>
<h4>И меня тоже 3</h4>
<p>text text text text text text text text</p>
</div>
<div id="toc"></div>