Fácil de la tabla de contenido generador en JavaScript puro

Vista prévia

Descripción

Sin embargo, otra tabla de contenido generador escrito en JavaScript puro.

El generador de la tabla de contenido hace que sea más fácil generar una navegación en la página de todos los elementos curativos dentro del documento.

Al hacer clic en los enlaces de anclaje se desplazará la página a las secciones correspondientes con soporte de hashtag.

Funcionamiento

Cree un elemento contenedor para colocar la tabla de contenido generada por JavaScript.

<div id="tc">


</div>

Inserte el script de la tabla de contenido en la parte inferior de la página.

<script src="js/j.js"></script>

Llame a la función en el contenedor de destino donde la biblioteca busca todos los elementos de encabezado.

tc('article','tc', document);

Aplica tus propios estilos a la tabla de contenido.

.tc {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-flow: column;

flex-flow: column;

margin:0 .5rem
}

.tc h2 {

border-bottom: 1px solid #bbb;

color: #555;

font-size: 15px;

margin: 0;

padding-bottom:.5rem;

padding-top:.5rem;

-webkit-transition: .5s all;

-o-transition: .5s all;

transition: .5s all
}

.tc a { color: #333 }

.tc h3, .tc h4, .tc h5, .tc h6 {

font-size: 13px;

margin: 0
}

.tc h3 a, .tc h4 a, .tc h5 a, .tc h6 a { color: #555 }

.tc h3:before, .tc h4:before, .tc h5:before, .tc h6:before { content: '- ' }

.tc h3 { margin-left:.5rem
}

.tc h4 { margin-left: 1rem }

.tc h5 { margin-left: 1.5rem }

.tc h6 { margin-left: 2rem }

Registro de cambios

07/06/2018

• Actualización de CSS