Como bien te han respondido, lo que pides tiene varias maneras de hacerlo por eso no estaría de más que en la propia pregunta especifiques que solución es la que buscas.
En cuanto a la solución yo e usado un un nav de boostrap y tan solo le he añadido el JQuery necesario para conseguir el efecto que quieres:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title></title>
<style media="screen">
*{
padding: 0px;
margin: 0px;
}
nav{
display: inline-block;
background-color: #959595;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#" id="inicio">AAAA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BBBB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCCC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DDDD</a>
</li>
</ul>
<script>
$(document).ready(function(){
$('li').click(function(){
$('li').each(function(){
//Recorremos todos los "li" para quitarles los fondos
$(this).css('background-color', '');
});
//Se lo añadimos al que se le hace el click
$(this).css('background-color', 'red');
});
});
</script>
</body>
</html>
Lo que hace básicamente es mirar todos los tag li que se encuentra en el HTML y primero les pone la propiedad "backgroud-color" en blanco para quitarle el fondo al tag li que ya lo tubiese,este caso se daría cuando el usuario haga su segundo click en otro tag li, es decir, cuando quira cambiar de vista. Por último le añade al li seleccionado el fondo con el color especificado, en este caso el ROJO.
IMPORTANTE PARA ESTE SCRIPT ES NECESARIO QUE INCLUYAS LA API DE JQUERY O BIEN POR LINK(COMO YO) O BIEN TE LO DESCARGAS Y LE PONES LA RUTA EN EL SRC
Espero que sea esto lo que estas buscando.
li
correspondiente para cada página