There is a TOC script that creates a table of contents for the page. But at the moment the script is processing the whole page, how to make it check only the specified block with some class?
- how do you use it? - Grundy
- On the site as usual, I attached the script and use it. - Anatoliy
- need a code example. You can insert a snippet into the question and demonstrate how it works now - Grundy
- Made an example: codepen.io/AnatoliyAV/pen/qqjzWX?editors=1010 - Anatoliy
|
1 answer
The plugin has an option
selector (default value is h1, h2, h3, h4, h5, h6): indicates which elements will be added to the table.
As you can see, the default is the list of headers, but since in the plugin code itself they are selected with the help of $(this.options.selector) , then all matching elements on the page will be selected.
To limit them, you just need to change the value of this option.
For example:
$(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> 
Grundy grundy
58.6k 7 49 93
- Thank you very much, everything works, as I did not think of myself :) - Anatoliy
|