Problemas con anclas html

ferbad12 · #1 (**permalink**) 23/10/2013, 14:36

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

JanPierre · #2 (**permalink**) 23/10/2013, 17:43

Hola, tienes un error en tu código, simplemente debiste colocar las etiquetas <h1></h1> dentro de las etiquetas anchor.

A continuación te dejo cómo debió estar tu código para que el scroll de desplace hacia el contenido que quieres anclar para cada respectivo link.

Código:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<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>

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

<a name="titulodos"><h1>Título Dos</h1></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>

<a name="titulotres"><h1>Título Tres</h1></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>

Como usaste tildes, era necesario el charset="utf-8", y dejé espacios entre los grupos de códigos que generan lo que deseas para que lo puedas reconocer.

Espero que te sirva de ayuda, si no, coméntanos nada más y vemos qué sucede.

ferbad12 · #3 (**permalink**) 23/10/2013, 19:06

Hola Tu respuesta funcionó le agregre mas texto y anduvo Muchas Gracias JanPierre

ArturoGallegos · #4 (**permalink**) 23/10/2013, 22:01

esto es invalido

Código HTML:

Ver original<a name="titulouno"><h1>Título Uno</h1></a>

un titulo no puede ir dentro de un link, en todo caso es al reves

Código HTML:

Ver original<h1><a name="titulouno">Título Uno</a></h1>

aunque para el tema de anclas no veo la necesidad de hacer eso, basta con agregar una ID

Código HTML:

Ver original<h1 id="titulouno">Título Uno</h1>

las anclas en el pasado iban a los elementos con la propiedad NAME correspondiente, pero eso dejo de ser asi hace buen tiempo, hoy dia las anchas funcionan con asignar una ID con el nombre correspondiente.

matibrufal · #5 (**permalink**) 25/10/2013, 12:00

Cita:

Iniciado por ArturoGallegos

esto es invalido

Código HTML:

Ver original<a name="titulouno"><h1>Título Uno</h1></a>

Perdón, pero tengo entendido que en HTML5 las anclas funcionan como bloques también.

ArturoGallegos · #6 (**permalink**) 25/10/2013, 12:18

de poderse si se puede y funcionan pero no se debe, el codigo es invalido, si lopasas por el validador veras como resultado documento con errores.

no se donde hayas visto que es valido hacer eso pero te recomiendo cambies de fuente y procures siempre validar tu codigo, desde la antiguedad y aun en html5 sigue siendo un error meter un elemento tipo bloque dentro de uno de linea.

puede funcionar en algunos navegadores pero puede ser impredesible en algunos casos.

--------------

Nota: como mencione antes para hacer un ancla eso de usar <a name="nombre"> ya no es necesario ya que las anclas apuntan a un identificador.... practicamente diria que es de la vieja escuela ese metodo, hoy dia solo se coloca cualquier elemento con una ID.

eg. el ancla "demo" apunta a cualquier elemento con la ID demo, puede ser un parrafo, un div, span, titulo.
<a href="#demo">ancla demo</a>

<div id="demo">contenido</div>