JSFiddle - React, Tailwind, and code Playground

by cristian_cena

HTML

<a href="pag1.php">la clave</a>
<a href="pag2.php">esta en la</a>
<a href="pag3.php">variable "pagina"</a>
<!-- enlaces.length será igual a 2, o sea, tres elementos contando desde el cero. -->

CSS

a{  /*por defecto desactivo*/
    padding: 0.3em;
    background: whitesmoke;
}
.seleccionado{
    /*estilo para el enlace activo*/
    background: yellowgreen;
}

JavaScript

var pagina = 1; // empieza a contar de uno
//  pagina = prompt("ingrese el nro de pag."); // o le preguntamos al usuario

var seleccionado = "seleccionado"; //nombre de la clase activa. Por defecto se ve desactivo, mirar el css.
var enlaces = document.getElementsByTagName("a"); //todos los enlaces
    
window.onload = function(){ //cuando cargue la pagina...
    if(pagina >= 1 && pagina <= enlaces.length){ //validamos la variable pagina.
        pagina = pagina - 1;  // porque los arrays empiezan a contar de cero.   
        for(i=0; i<enlaces.length; i++){ //recorremos los enlaces
            if(i == pagina){ //cuando el indice sea igual a la variable pagina
                enlaces[i].className = " seleccionado"; //añadimos la clase
            }
        }
    }
    else{
       //si la pagina no corresponde con la cantidad de enlaces.
    }
}