Foros del Web » Programando para Internet » Jquery »

Problemas anclas html javascript jquery

Estas en el tema de Problemas anclas html javascript jquery en el foro de Jquery en Foros del Web. Hola a todos tengo un problema con el tema de las anclas en html el código es el siguiente <!DOCTYPE HTML> <head> <meta http-equiv="content-type" content="text/html" ...
  #1 (permalink)  
Antiguo 23/10/2013, 14:43
 
Fecha de Ingreso: septiembre-2012
Ubicación: Cordoba
Mensajes: 44
Antigüedad: 12 años, 2 meses
Puntos: 1
Problemas anclas html javascript jquery

Hola a todos tengo un problema con el tema de las anclas en html
el código es el siguiente

<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="fernando" />

<title>Untitled 1</title>
</head>

<body>

<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<h1>Título Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>

<h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>

<h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>

</body>
</html>


Necesito preguntarle como hacer para que al pulsar el enlace al titulo 3 me muestra el titulo y contenido del titulo 3 pero me oculte el titulo 1 y el 2 con sus contenidos. Es decir me desplaze la barra de scroll hacia el comienzo del titulo 3 de modo que este quede al principio de la pantalla del navegador
  #2 (permalink)  
Antiguo 25/11/2013, 01:42
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Problemas anclas html javascript jquery

Lo que buscas hacer es un scrolling, por lo que no sería necesario ocultar los otros dos párrafos.

Solamente debes de asignar un id a cada elemento h1 o p:

Código HTML:
Ver original
  1. <a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
  2. <a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
  3. <a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
  4.  
  5. <h1 id = "titulouno">Título Uno</h1>
  6. <p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
  7.  
  8. <h1 id = "titulodos">Título Dos</h1>
  9. <p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
  10.  
  11. <h1 id = "titulotres">Título Tres</h1>
  12. <p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>

De esta forma, cada vez que des un clic en uno de los tres enlaces, el elemento que contenga el id indicado en el atributo href, obtendrá el enfoque.

Saludos

Etiquetas: anclas, html, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:20.