Mismo Header para todas las paginas

[NueveReinas]

Algo así: http://jsfiddle.net/rsrc68yq/

Código HTML:

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

Código 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) == "pagina4.html")
{  $("#pagina4").addClass('activo'); };
    
});
 

Código 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;
}
 

De todas formas te aclaro que algo parecido se podría hace en PHP, pero bueno, este ejemplo está hecho en JS.