Activar un botón con un color diferente en web para navegar

La idea es que si tengo una navegación con tres página o más al dar clic le coloque un color al botón

Indicando donde estoy ubicado, tengo el siguiente código combinando HTML, CSS y JAVA SCRIPT pero

Al colocar un LINK a cada botón al cambiar el código no se mantiene que me hace falta para que

Cuando cambie de página el color del botón este marcado indicando donde estoy ubicado.

HTML:

<div id="NAV">
<a href="#"><button class="btn active">1</button></a>
<a href="#"><button class="btn">2</button></a>
<a href="#"><button class="btn">3</button></a>
</div>

CSS ESTILO:

.btn{
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}

CSS al pasar el mouse:

.active, .btn:hover {
background-color: #666;
color: white;
}

Java script:

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

Me podrían colaborar que puede estar pasando lo que quiero es que al navegar en las

Tres páginas o más que me ubique un tono de color al botón indicando en que página

Estoy ubicado