Tengo un archivo llamado header.php con el header y navegación, al que llamo desde todas las paginas que lo requieran, y necesito insertarle la clase "active" a cada enlace de la navegación, para que desde cada pagina se aplique un estilo (ejemplo, si estoy en inicio.php, el boton de inicio cambia de estilo). El problema es que no se como hacer para que desde la pagina inicio se añada la clase "active" en header.php. Ayuda a resolver ese problema o alguna alternativa...
El código es:
HTML header.php
<header>
<img src="img/logo1.png" alt="LogotipoPrincipal" class="logop margenes-g">
<nav class="principal">
<ul class="margenes-g">
<a href="#" class="rmenu">Menu</a>
<div class="menucontent">
<a id="hp1" class="" href="index.php">Inicio</a>
<a id="hp2" href="#">Productos</a>
<a id="hp3" href="#">Capacitación</a>
<a id="hp4" href="#">Servicios</a>
<a id="hp5" href="#">Descargas</a>
<a id="hp6" href="#">Soporte</a>
<a id="hp7" href="#">Nosotros</a>
<a id="hp8" href="contacto.php">Contacto</a>
<a id="hp9" href="pruebas.php">Pruebas</a>
</div>
</ul>
</nav>
HTML inicio.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASPEL - pruebas</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<?php
include("parts/header.php")
?>
<script type="text/javascript" >
window.onload = function(){
<iframe id="iframeHeader" src="parts/header.php"></iframe>
var iframeDocument =
document.getElementById('iframeHeader').contentDocument;
var hp9 = iframeDocument.getElementById('hp9');
hp9.classList.add('active');
**//intento faillido**
}
</script>
</body>
</html>
CSS
.active{
/*border-top: solid var(--azul1) 3px !important;*/
background-color:red !important;
}