Ayuda HTML barra de navegacion.

[hadolf_panizo]

Hola!

Soy nuevo en esto de hacer paginas web. Me he leido las FAQ sobre el tema y no hay nada relacionado.

Expongo mi caso.

Tengo una pagina web sencillita con una barra de navegacion y unos div que tienen texto.
La idea que quiero conseguir es que si pincho en algunas de las opciones de la barra de navegacion los div que tienen texto cambien automaticamente.

He buscado en internet y la opcion que he encontrado para solucionarlo es con JavaScrip y de hecho medio funciona, pero a mi lo que realmente me interesa es conseguirlo via html.

¿Alguien sabria explicarme como hacerlo??

Muchas gracias de antemano.

[jomaruro]

Hola:

La única forma de hacerlo con HTML es mediante frames, cosa desaconsejable desde le punto de vista de la indexación en buscadores.

Saludos.

[hadolf_panizo]

Muchas gracias por la respuesta.

¿Podrías explicarte un poco mas?

Un saludo!.

[sanxuan]

Una etiqueta <frame> o <iframe> que se conocen también con el nombre de marcos muestran el contenido de otra página web (otro HTML) dentro de una ventana de nuestra página.
Puedes consultar cualquier manual de HTML para más información. Sería demasiado extensa una explicación más detallada.
Usando esta posibilidad, basta con añadir en el enlace de tu barra de navegación la dirección de la página que quieres que aparezca en la ventana/marco añadiendo el atributo target con el nombre del marco donde quieres que aparezca.

[ArturoGallegos]

mmm no se si este bien o mal hacer esto pero es algo que yo haria si no puedo usar java

Código CSS:

html,body{margin:0;padding:0;font:13px 'trebuchet MS'; color:#333;}
a{color:#036;text-decoration:none;}a:hover{color:#f02;}
#Menu{margin:20px;padding:0;list-style:none;}
#Content{margin:20px;overflow:hidden;}
#Content,#Content div{width:400px; height:200px;padding:0;line-height:18px;}
 

Código HTML:

<ul id="Menu">
    <li><a href="#Item1">Item 1</a></li>
    <li><a href="#Item2">Item 2</a></li>
    <li><a href="#Item3">Item 3</a></li>
    <li><a href="#Item4">Item 4</a></li>
</ul>
<div id="Content">
    <div id="Item1"><strong>Contendio 1</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div id="Item2"><strong>Contendio 2</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div id="Item3"><strong>Contendio 3</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div id="Item4"><strong>Contendio 4</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
 

[hadolf_panizo]

Muchas gracias.

La idea la he cogido, mañana lo pruebo y comento los resultados.

Un saludo!.

[hadolf_panizo]

Jejeje, al final he hecho la prueba ahora, y no es exactamente lo que busco. Me explico:

Salvo que esté en un error tu lo que haces es que la pagina principal muestras todos los item, y luego, segun pinches en el en los diferentes <li> vas al que has pinchado.

Yo lo que quiero es que solo aparezca uno y segun vaya pinchando en los diferentes <li> ese item que aparezca se borre y se sustituya por el que he seleccionado.

¿Me he explicado?

Gracias!.

[ArturoGallegos]

o no lo probaste bien o me estas adivinando el efecto que quise hacer...

ok en el html tiene todo los divs con texto visibles pero tanto al div padre como al hijo le di la misma altura por lo que solo es visible un div a la vez y según escojas en la lista se mostrara unicamente el que selecciones....
te dejo un link al ejemplo funcional de lo que yo pretendí hacer
http://bit.ly/ehjwBs

si no es lo que buscas (aunque realmente me lo saque de la manga) tu única alternativa es usar ajax para cargar contenido externo sin recargar la pagina... o crear varias paginas que dudo sea lo que necesitas

[sanxuan]

La solución que te han dado es bastante simple y funcionaría con otros contenidos dentro de los div.
Yo normalmente utilizo javascript para hacer lo mismo cambiando la propiedad visibility o display de las capas al hacer click en los enlaces.
Creo que lo usaré alguna vez.

[hadolf_panizo]

Gracias por las respuestas. Al final he conseguido lo que quería pero opté por la opción de javascript.

El ejemplo anterior valia, pero no quería tener apariencia de texto, aunque estoy de acuerdo que yo tambien lo usaré.

Lo del tema del display, es otra cosa con la que voy a jugar, pero a su debido tiempo.

¿ Tendríais un ejemplo (de lo del display) a mano para echarle un vistazo (ejemplo de la función javascript, me refiero)?

En cualquier caso, no pasa nada.

Muchas gracias.

[sanxuan]

Imagina el siguiente ejemplo con dos imágenes.

<img id="v1" src="img1.gif" onclick="document.getElementById('v2').style.visib ility='hidden'" />
<img id="v2" src="img2.gif" />

El script de la primera hace que al pulsar sobre ella la segunda ('v2') se oculte. Una tercera podría volver a hacerla visible con el mismo script sustituyendo 'hidden' por 'visible'.
Sencillo ¿no?
Hay bastante documentación sobre JavaScript por la red si quieres aprender y encontrar ejemplos.