NueveReinas

HTML

<div id="incluir-header"></div>

CSS

/* Estilos de ejemplo */

#header {
    max-width:900px;
    padding-top:15px;
    padding-bottom:15px;
    background:#CCC;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
}

li {
    color:white;
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
    background:#666;
    padding:15px;
}

li:hover {
    color:#666;
    background:white;
}

.activo {
    color:#666;
    background:white;
    border:1px red solid;
}

JavaScript

$(document).ready(function(){
    
    //Ponemos todo el contenido del header en el contenedor llamado "incluir-header" (o como quieras llamarlo) a través del html de JS
$("#incluir-header").html('<div id="header"><ul><li id="inicio">Inicio</li><li id="pagina1">Página 1</li><li id="pagina2">Página 2</li><li id="pagina3">Página 3</li><li id="pagina4">Página 4</li></ul></div>');

    //Comprobamos la URL, por ejemplo, para el index:
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "")
{  $("#inicio").addClass('activo'); };

if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "index")
{  $("#inicio").addClass('activo'); };

if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "index.html")
{  $("#inicio").addClass('activo'); };
    
    //Y así con todas las páginas y sus URLs variantes (que terminan con .html o .php por si acceden desde ese enlace)
    
    //Página 1
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina1")
{  $("#pagina1").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina1.php")
{  $("#pagina1").addClass('activo'); };
    
    //Página 2
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina2")
{  $("#pagina2").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina2.php")
{  $("#pagina2").addClass('activo'); };

    //Página 3
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina3")
{  $("#pagina3").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina3.html")
{  $("#pagina3").addClass('activo'); };
    
    //Página 4
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) == "pagina4")
{  $("#pagina4").addClass('activo'); };
    
if (location.pathname.substring(location.pathname.lastIndexOf("/") + 1) ==...