Tener clase = «seleccionado» dependiendo de qué página / URL sea. Este concepto es muy importante, especialmente cuando se diseña una barra de navegación para un sitio web para que los visitantes del sitio web sepan en qué página del sitio se encuentran.
Enfoque: Para tener class=» seleccionado» dependiendo de cuál sea la página/URL actual:
- Escribe tu código HTML .
- Escriba el CSS para la clase seleccionada.
- En javascript , encuentre la ubicación actual de su página usando location.href.
- Ahora guarde todas las etiquetas a en una variable, digamos «Elementos» usando la función document.querySelector.
- Repita los elementos y compare su ubicación con la URL de la página actual.
- Si la ubicación de los elementos coincide con la ubicación actual de la página, agregue la clase de etiqueta actual a la clase seleccionada.
Sintaxis:
const currentLocation = location.href
Ejemplo: este código debe pegarse en los 4 archivos.
HTML
<html>
<head>
<style>
a {
color: #000;
text-decoration: none;
}
.nav {
padding: 10px;
border: solid 1px #c0c0c0;
border-radius: 5px;
float: left;
}
.nav li {
list-style-type: none;
float: left;
margin: 0 10px;
}
.nav li a {
text-align: center;
width: 55px;
float: left;
}
.nav li a.selected {
background-color: green;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li>|</li>
<li><a href="gfg.html">GFG</a></li>
<li>|</li>
<li><a href="about.html">About</a></li>
<li>|</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
<script type="text/javascript">
const currentLocation = location.href;
const Items = document.querySelectorAll("a");
const Length = Items.length;
for (let i = 0; i < Items.length; i++) {
if (Items[i].href === currentLocation) {
Items[i].className = "selected";
}
}
</script>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por namanaggarwal1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA