HTML - Colorear Boton Activo en Menu CSS

Hola a todo el foro, tengo hecho este menu responsive, pero queria saber como hacerlo, para que el ultimo boton pulsado quede de otro color, y asi saber en que seccion de la web estan.
Y tambien que el boton inicio, no quede siempre de color verde, es decir que se desactive cuando se pulsa otro boton.

El codigo es el siguiente..............


<style>
.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 14px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
background-color: #04AA6D;
color: white;
}



.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>


<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

<div class="topnav" id="myTopnav">
<a href="/" class="active">INICIO</a>
<a href="/computer.php">INFORMATICA</a>
<a href="/electronic.php">ELECTRONICA</a>
<a href="/about.php">ACERCA DE</a>
<a href="/contact.php">CONTACTO</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>


-------------------------------------------

Muchas gracias a todos!!!!

Si lo vas ha hacer con php es mas fácil tener un documento para el estilo ejemplo estilo css:
estilo css
.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 14px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}




.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

una pagina para el menú donde podras id a cada elemento

ejemplo menu.php
<link href="estilo.css" rel="stylesheet">
<div class="topnav" id="myTopnav">
<a href="prueba.php" id='inicio'>
INICIO
</a>
<a href="formulario2.php" id='computer'>INFORMATICA</a>
<a href="/electronic.php" id='electronica'>ELECTRONICA</a>
<a href="/about.php" id='abaut'>ACERCA DE</a>
<a href="/contact.php" id='contact'>CONTACTO</a>
</div>
Y las otras paginas serán includes del menu y el javascript que cambia la clase con el id:

Inicio.php o index.php
<?php include 'menu.php';?>
<script type="text/javascript">
var element = document.getElementById('inicio');
element.style.backgroundColor = '#04AA6D';
element.style.padding ="5px 10px";
</script>

computer.php
<?php include 'menu.php';?>
<script type="text/javascript">
var element = document.getElementById('computer');
element.style.backgroundColor = '#04AA6D';
element.style.padding ="5px 10px";
</script>

Muchas gracias Antonio.
Enseguida que pueda lo pruebo a ver si me funciona.

Saludos y que tengas un buen dia!!!

Gracias Antonio !!!!!!. Me fue bien el codigo de ejemplo

Yo es que de programacion Web se lo basico, y buscando ejemplos por google no encontraba nada.

Saludos desde España !!!!!

Hola buenas de nada por la ayuda, se que no hay ejemplos de todo, pero si hay ejemplos de como cambiar el estilo con javascript y pensar como se podría hacer. Y yo también soy de España. Un saludo.

Hola Antonio, que tal???

Hace unos meses me diste una solucion a un menu, este menu me va perfecto, pero a ver si se puede hacer una pequeña modificacion.

Cuando veo la web en un pc. Foto adjunta "menu normal"
va perfecto, porque en el menu queda recalcado con otro color en que seccion estoy.


Pero cuando la miro desde el telefono movil, al elegir la seccion en el menu, Foto adjunta "menu telefono movil" , me cambia a la pagina correctamente, pero al cerrarse el menu, siempre pone INICIO, Foto adjunta "menu telefono movil seccion actual", a ver si seria posible que donde pone INICIO, pusiera el texto del menu que he seleccionado, o sea INFORMATICA, ELECTRONICA, etc.

No se si me he explicado bien.

Saludos y que tengas un buen dia!!!

• capturas.zip(16,4 KB)