Cambiar tipo de texto al pulsar un link

[borjaj]

Buenos dias, necesito que me resuelvan una duda.

Estoy haciendo una web en la que tengo varios links principales.
Estos links me llevan (dentro de la misma página) a 3 iframes, y dependiendo del link te carga una cosa u otra en cada iframe.

Lo que sucede es que no se si es por el motivo de los iframes, el a:visited no me funciona (es como si nunca entrase a ninguna página)

Este es mi código:

Código CSS:

a { 
    font-family: "Tahoma", Arial, Verdana;
    font-size: 11px;
    color: #6a6a65;
    text-decoration:none; 
} /*para el enlace, tal cual*/
a:visited {
    font-weight: bold;
} /*Para cuando ha sido visitado*/
a:hover {
    font-weight: bold;
} /*Cuando el ratón está sobre él*/
 

No se que hacer para que funcione.

*** lo que quiero (y no si realmente me lo aportará el a:visited) es que al pulsar un link, éste se quede marcado hasta que pulse otro de su misma categoría.

No se si me he explicado bien, si quereis os puedo pasar el link de la web y que lo veais mas o menos.

Muchas gracias. Un saludo.

[borjaj]

Os adjunto la página por si sirviese para entenderlo
http://www.borjajusdado.es/Apuntes.html

[borjaj]

conseguido al final el codigo que he puesto ha sido este

Código CSS:

a { 
    font-family: "Tahoma", Arial, Verdana;
    font-size: 11px;
    color: #6a6a65;
    text-decoration:none; 
} /*para el enlace, tal cual*/
a:visited {
    font-weight: bold;
} /*Para cuando ha sido visitado*/
a:hover {
    font-weight: bold;
} /*Cuando el ratón está sobre él*/
a:focus {
    font-weight: bold;
}
 

[borjaj]

NOOOO!! No esta conseguido, porque al pulsar en cualquier otro lado de la página el texto en negrita vuelve ser normal...

Porfavor AYUDAA!!

Quiero que se quede en negrita el link hasta que de a otro link de la página

[oldie]

el iframe carga ese mismo css? o carga otro? haz que el iframe cargue el mismo css que quieres que haga la negrita con el a:visited

[borjaj]

Buenas Oldie, he hecho lo que has comentado (por que en un principio no tenia ese css en los iframes) pero no he conseguido que cambien... ¿Alguna solución posible?

Buscaría algo como piden en esta página, pero de la que tampoco he conseguido nada

http://www.domestika.org/foros/5-programacion_cliente/hilos/83790-no_consigo_que_el_link_quede_marcado_mientras_es_v isitado

[pzin]

:visited no es para estilizar la página actual, sino para estilizar las páginas visitadas.

[borjaj]

Entonces hay algun metodo en css de conseguir esto¿

Estuve buscando y creia que con a:focus se podia, pero en mi caso no he podido

En esta pagina hay una solucion pero a mi no me vale porque tengo 3 iframes que cambian a la vez
http://www.forosdelweb.com/f53/cambiar-color-enlace-pagina-que-estoy-viendo-826912/

Aqui teneis un ejemplo, pero en php
http://www.forosdelweb.com/f13/resaltar-enlace-menu-363813/

[pzin]

Lo único que hay en CSS es :target, pero sólo funciona con enlaces internos —los que llevan almohadilla al final.

No hay nada para colorear el enlace actual.

Rafael sugirió una vez usar un selector de atributos:

Código CSS:

a[href="/url/actual.html"] {
  color: red;
}
 

Pero lo ideal es añadir una clase al elemento del enlace, ya sea a mano o mediante un lenguaje de lado servidor, y luego darle estilo como se haría normalmente. Es decir, que tengas algo así:

Código HTML:

<ul>
  <li><a href="gato.html">Gato</a></li>
  <li><a class="enlace_actual" href="perro.html">Perro</a></li>
  <li><a href="mofli.html">Koala</a></li>
</ul>
 

Y estilizas .enlace_actual con CSS.

[faillure]

las pseudoclases que aplican al mismo elemento (:hover, :focus, :active) no son permanentes... en teoría
pero puede hacer que su estado se mantenga "para siempre"
[URL="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/"]en ingles[/URL]
[URL="http://ksesocss.blogspot.com/2012/03/pseudoclase-css-active-persistente.html"]en español[/URL]

[borjaj]

Faillure, estoy intentando lo de la página que has puesto, pero al pasar los códigos no veo que hagan lo mismo que en el ejemplo...

Pzin, que son esos enlaces internos que comentas, no llevo mucho tiempo con la página y estoy comenzando a formarme desde hace poquito, he visto # en css pero no entiendo su significado.

Graciaas!!

[borjaj]

pzin he visto que en esta página:
http://www.forosdelweb.com/f53/como-cambiar-color-link-activo-1053368/

Tu contestaste a un usuario lo siguiente:

Tendrías que crear una nueva clase en CSS y definir el color u otros estilos que necesites, y luego mediante programación de lado servidor añades en caso de que se esté visitando esa página. No es posible hacerlo puramente mediante CSS. A menos que sean enlaces en la misma página, que seguramente no sea tu caso.


En mi caso todos los lins estan en la misma pagina porque lo que cambian son los iframes de abajo, pero la pagina sigue siendo la misma (www.borjajusdado.es)

No se si me has contestado considerando esa respuesta, pero necesito tu ayuda por favor...

[pzin]

Pues ya lo tendrías que hacer con JavaScript; no recargas la página ni usas anclas y son enlaces hacia un iframe.

[borjaj]

Ya estoy mas cerca de la solución

Tengo el siguiente código:

Código HTML:

<ul>
    <li><a href="#id1"><div id="id1">Block 1</div></a></li>
    <li><a href="#id2"><div id="id2">Block 2</div></a></li>
    <li><a href="#id3"><div id="id3">Block 3</div></a></li>
    <li><a href="#id4"><div id="id4">Block 4</div></a></li>
</ul>
 

Y el siguiente

Código CSS:

/* Add some spacing */
ul, div
{
 
}
 
/* Default block styles */   
div
{
 
}
 
/* Change its appearance when it's matched */    
div:target
{
    border-color: #9c9c9c;      
    -moz-box-shadow: 0 0 4px #9c9c9c;
    -webkit-box-shadow: 0 0 4px #9c9c9c;
    box-shadow: 0 0 4px #9c9c9c;
    font-weight: bold;
}
 

Bien, ahora lo que quiero es eliminar el salto que produce :target

Y tengo el siguiente codigo para ello

Código Javascript:

$("a[href^=#]").on("click", function(e) { e.preventDefault(); history.pushState({}, "", this.href); });
 

¿Como tengo que hacer para que se active ese codigo javascript?

[pzin]

Lo muevo al foro de jQuery.

Si vas a usar JavaScript, mejor usa sólo JavaScript. No tiene sentido usar anclas, pushState() y todas esas cosas.

Sencillamente, haz algo así:

Código HTML:

<a href="algo" class="enlace_iframe">
 

Código Javascript:

$('.enlace_iframe').click(function(){
  $('.enlace_iframe').removeClass('activo')
  $(this).addClass('activo')
})
 

Y luego creas una clase en tu CSS:

Código CSS:

.enlace_iframe.activo {
  color: red;
}
 

Edito: Y no repitas temas en el foro, no está permitido.

[borjaj]

Puff es que yo tengo ya en el link puesto este codigo y no se como complementarlo con el que me has comentado:

Código HTML:

<a href="javascript:;" onclick="deatres('/Inicio/Pagina Principal/Izquierda01.html','/Inicio/Pagina Principal/Centro01.html','/Inicio/Pagina Principal/Derecha01.html');">Página Principal</a>
 

El codigo sirve para abrir tres iframes a la vez

Código Javascript:

function deatres(url1, url2, url3) {
parent.frame2.location.href= url1;
parent.frame1.location.href= url2;
parent.frame3.location.href= url3; }
 

Como debo incluirlo? Perdona por la ignorancia :(

[borjaj]

No se si la función de Javascript no me funciona, o que pasa...

He puesto el Codigo Javascript que me has dicho entre <script type='text/javascript'> y <script>

Código Javascript:

$('.enlace_iframe').click(function(){
  $('.enlace_iframe').addClass('activo')
  $(this).removeClass('activo')
})
 

Luego en el CSS he puesto esto

Código CSS:

.enlace_iframe.activo {
    font-family: "Tahoma", Arial, Verdana;
    font-size: 11px;
    color: #6a6a65;
    text-decoration:none;
    font-weight: bold;
}
 

Y finalmente he puesto en el link esto

Código HTML:

<a href="javascript:;" onclick="deatres('/Inicio/Pagina Principal/Izquierda01.html','/Inicio/Pagina Principal/Centro01.html','/Inicio/Pagina Principal/Derecha01.html');" class="enlace_iframe">Página Principal</a>
 

¿Qué estoy haciendo mal?

[pzin]

¿Tienes enlazada la librería jQuery? Como pusiste código de jQuery pensé que la tendrías puesta.

Si no es así, igual es mejor usar la función deatres() y poner ahí algo de JavaScript que añada y quite clases.