Ir cambiando la clase active de un enlace a otro al seleccionar

Hola a tod@s
Tengo varias galerías de fotos en la misma página, tienen pocas fotos cada una de ellas y lo que quiero es que al pinchar en un enlace de cualquiera de las galerías, me ponga ese enlace como active y lo quite del enlace anterior y lo mantenga active hasta que pinche en otro enlace, pero sólo tiene que afectar a esa galería y no a las otras.
Tengo esta función, pero el problema es que actúa sobre todos los enlaces de la página, incluyendo las otras galerías y otros enlaces que nada tiene que ver con las fotos, así que no me vale.

Código Javascript :

var a = document.getElementsByTagName("a"),
//y si le pongo var a =  document.getElementById('galeria').getElementsByTagName("a"), para que me coja sólo los enlaces de galeria no hace nada, no funciona
    forEach = Array.prototype.forEach;

window.addEventListener("click", function(e){
    forEach.call(li, function(a){
        a.className = a === e.target ? "active" : "";
    });
}, false);

Código CSS :

ul.imgLista li a.active {
   background: red;   
}

Código HTML :

<div id="galeria_1">
<span class="imgDescripcion" id='titulo_1'>Galería de imágenes</span>   
   <ul class="imgLista">     
<li><a class="active" onClick="return showPic(this,'galeria_1','titulo_1')" href="images\1_castillo.jpg" title="Esta es la primera imagen">1</a> </li>
<li><a onClick="return showPic(this,'galeria_1','titulo_1')" href="images\2_castillo.jpg" title="Esta es la segunda imagen">2</a> </li>
</ul>
   <img class="imgContenedor" id="galeria_1" src="images\1_castillo.jpg"  />
</div>

<div id="galeria_2">
<span class="imgDescripcion" id='titulo_2'>Galería de imágenes </span>   
   <ul class="imgLista">     
<li><a class="active" onClick="return showPic(this,'galeria_2','titulo_2')" href="images\1_palacio.jpg" title="Esta es la primera imagen">1</a> </li>
<li><a onClick="return showPic(this,'galeria_2','titulo_2')" href="images\2_palacio.jpg" title="Esta es la segunda imagen">2</a> </li>
</ul>
   <img class="imgContenedor" id="galeria_2" src="images\1_palacio.jpg"  />
</div>

cambia el :

Código :

var a = document.getElementsByTagName("a"),

por un

Código :

var a = document.getElementsByClassName("linkulo");

Y al final solo le pones la clase a los "link" de los que si quieres que funcione

Código :

<a class="linkulo"> Algo aqui </a>

Puedes agregar la clase del elemento inicial activo

Código :

<a class='linkulo active">Algo aqui</a>

Sin embargo, al cambiar lo anterior tambien debes de re-asignar la clase, en ves de esto:

Código :

a.className = a === e.target ? "active" : "";

Cambiarlo a esto

Código :

a.className = a === e.target ? "active linkulo" : "linkulo";

Pero al tener varias galerías y en todas la primera foto, al cargar la página ya aparece como activa, si pongo esta clase, class="linkulo" en los enlaces de todas las galerías cuando yo pincho en un enlace de cualquiera de ellas, me pone ese enlace como activo en esa galería pero me desactiva el enlace activo de todas las demás.
Así que lo que yo busco, es una función que al pinchar en un enlace de la galería_1 reciba, por ejemplo, la clase linkulo1, si pincho en un enlace en la galería _2 pues reciba la clase linkulo2, y así con el resto de galerías, de esa manera afectaría exclusivamente a la galería en la que he pinchado el enlace y no afectaría al resto.

Usa clases distintas para cada galería.

Ya le he puesto clases distintas a cada galería, así todos los enlaces de la primera galería tienen un nombre de clase, todos los de la segunda otro, etc., pero sigue sin funcionar, el problema está en la función, porque me he dado cuenta que al pinchar fuera de los enlaces, en cualquier lugar del documento, se ejecuta la función, cuando no debería y me borra la clase activa de todas las galerías.

Yo lo uso en el menu de navegación, pero puede servirte, lo hago con JQuery de una forma muy sencilla:

Código HTML :

<ul>
   <li><a href="#" class="activo galeria1">Item1</a></li>
   <li><a href="#" class="galeria1">Item2</a></li>
   <li><a href="#" class="galeria1">Item3</a></li>
</ul>

<ul>
   <li><a href="#" class="activo2 galeria2">Item1</a></li>
   <li><a href="#" class="galeria2">Item2</a></li>
   <li><a href="#" class="galeria2">Item3</a></li>
</ul>

Código CSS :

a{
   text-decoration:none;
   color:#f1f1f1;
}

a:hover{
   color: orange;
}

.activo{
   color: orange;
   border-bottom: 3px solid orange;
}

Código Javascript :

$(document).ready(function(){
   
   $("a.galeria1").click(function(){
      
      $("a.galeria1").removeClass("activo");
      $(this).addClass("activo")
      
   });
   
   $("a.galeria2").click(function(){
      
      $("a.galeria2").removeClass("activo");
      $(this).addClass("activo")
      
   });
   
   
});

Es una forma..

En el html hay un error, en la segunda galeria el enlace tiene clase "activo2".. va solamente "activo".

Te dejo un Codepen funcionando.

http://codepen.io/fede5426/pen/qdXZqz

Saludos

Gracias por responder, ya he probado tu código y funciona perfectamente y es bastante más simple que con JavaScript, así que muchísimas gracias, aunque me habría gustado resolverlo con JavaScript, porque es el lenguaje que conozco y con el que me manejo, de jQuery mis conocimientos son nulos y como sólo soy un aficionado prefiero centrarme en un lenguaje y aprenderlo lo mejor que pueda, que utilizar varios y no dominar ninguno, pero dicho esto te reitero las gracias.
Ahora te quería comentar una cosa, el código que me has pasado, en vez de repetir el mismo código para cada galería, sólo cambiando en Nº de la galería, que si es una o dos, es mejor así, pero si son más, no seria más lógico, que desde los enlaces, crear una función y a través del evento onclick pasar el parámetro con el Nº de galeria

Si, hazlo.

Por cierto JQuery es un framework de JS, que evita trabajar demás para todos los tipos de navegadores. Ya que cada uno tiene a veces distintas formas de interpretar el Javascript.

Hola de nuevo, durante este tiempo como sólo tenia un par de galerías, he estado utilizando este código de esta manera que funciona perfectamente

Código Javascript :

$(document).ready(function(){
   $("a.galeria1").click(function(){
      $("a.galeria1").removeClass("activo");
      $(this).addClass("activo")
   });
   $("a.galeria2").click(function(){
      $("a.galeria2").removeClass("activo");
      $(this).addClass("activo")
   });
});

Pero he ido metiendo más galerías y ya no me sirve, no puedo repetir el mismo bloque de código cada vez que meto una galería más cambiando nada más que el nº de galería, así que he probado a hacerlo de esta manera pero no funciona

Código Javascript :

$(document).ready(function(){
   $('a.galeria_'+id).click(function(id){
      $('a.galeria_'+id).removeClass("activo");
      $(this).addClass("activo")
   });
});

en HTML resumido sería así el código del enlace

Código HTML :

<li><a class="active galeria_1" >1</a> </li>
      <li><a class="galeria_1">2</a> </li>

<li><a class="active galeria_2" >1</a> </li>
      <li><a class="galeria_2">2</a> </li>

Pero no funciona, así que a ver si me podéis dar una idea de porqué no va

No funciona por que son elementos dinamicos y hacer esto: $('a.galeria_'+id).click(function(id){

no significa que id, este definido al momento lo siento pero regresa a lo que te dije de "linkulo"

No me funciona y yo lo veo todo bien, el primer enlace está activo, pero cuando pincho en cualquier otro no hace nada
[js]
var a = document.getElementsByClassName("linkulo");

forEach = Array.prototype.forEach;

window.addEventListener("click", function(e){
forEach.call(li, function(a){
a.className = a === e.target ? "active linkulo" : "linkulo";
});
}, false);
[/j

Código HTML :

      <li><a class="linkulo active" onClick="return showPic(this,'galeria_1','titulo_1')" href="images/1_castillo_08-05-2015_004.jpg" title="Vista fachada frontal, entrada al Castillo">1</a> </li>
      <li><a class="linkulo" onclick="return showPic(this,'galeria_1','titulo_1')" href="images/2_castillo_08-05-2015_008.jpg" title="Vista frontal plano inclinado, entrada al Castillo">2</a> </li>
        <li><a class="linkulo" onclick="return showPic(this,'galeria_1','titulo_1')" href="images/3_castillo_08-05-2015_005.jpg" title="Vista fachada lateral">3</a> </li>

s]