En este artículo, veremos cómo crear “enlaces” en su página HTML que están vinculados a la sección de la misma página. Para lograr esto, necesitamos tener algún conocimiento previo de algunas características HTML de la etiqueta de anclaje con el «href» y la clase y la identificación .
Enfoque: Ya que ahora sabemos que la etiqueta de anclaje <a> se usa para crear cualquier enlace. también sabemos que «href» puede contener la dirección del enlace. Pero en nuestro caso, queremos vincular a la sección de la misma página, en ese caso usaremos id para identificar diferentes secciones de nuestra página web. Estos identificadores se pueden pasar al href como se muestra a continuación :
Sintaxis:
<a href="#section1" >section 1</a>
En este caso, el id “sección1” se le puede dar a cualquier componente o sección de nuestra página web. El enlace anterior apuntará a la sección que tiene la id sección1. Aquí, el atributo href sabe que la «sección 1» no es un enlace ordinario, sino que es una identificación al proporcionar «#» al principio. también es obvio que no deberíamos usar nombres de clase en el atributo href ya que el atributo href no los entiende. Además, los nombres de las clases no son únicos en el documento, por lo que no tiene sentido usarlos como identificadores de una sección en particular.
Ejemplo: En este ejemplo, estamos dividiendo nuestra página web en diferentes secciones usando div. La primera sección tiene la clase «nav». podemos ver que esta sección tiene etiquetas <a> para navegar a diferentes secciones de nuestra página. Luego tenemos cuatro secciones, cada una se identifica de forma única con los identificadores, como «sección1», «sección2», etc. Estos identificadores se asignan al href de las etiquetas <a> en la sección de navegación. cada vez que el usuario hace clic en la etiqueta <a>, lo vincula a la sección en particular.
A continuación se muestra la implementación del enfoque anterior:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Section links</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.section {
width: 100vw;
height: 40vh;
background-color: #EF5354;
font-size: 50px;
color: white;
text-align: center;
margin: 10px 5px;
}
.one,
.three {
background-color: #E03B8B;
}
.nav {
width: 100vw;
height: 40vh;
background-color: #3944F7;
font-size: x-large;
color: white;
text-align: center;
margin: 10px 5px;
display: flex;
flex-direction: row;
justify-content: space-around;
place-items: center;
}
.btn {
color: white;
background-color: #38CC77;
height: 40px;
width: 90px;
padding: 2px;
border: 2px solid black;
text-decoration: none;
}
</style>
</head>
<body>
<div class="nav">
<a href="#section1" class="btn">1</a>
<a href="#section2" class="btn">2</a>
<a href="#section3" class="btn">3</a>
<a href="#section4" class="btn">4</a>
</div>
<div class="section one" id="section1">
section 1
</div>
<div class="section two" id="section2">
section 2
</div>
<div class="section three" id="section3">
section 3
</div>
<div class="section four" id="section4">
section 4
</div>
</body>
</html>
Producción:
enlazando a la sección de la misma página
Publicación traducida automáticamente
Artículo escrito por jymnjogiya y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA