Mostrar dive segun llamada

function · #1 (**permalink**) 13/12/2010, 13:26

Estimados,

Quisiera ayuda en esto, soy muy torpe en javascript pero quisiera aprender. Quiero saber como hacer que se muestre un dive determinado según el llamado mediante href,es decir algo asi:

tengo estas anclas:

Código HTML:

Ver original<a href="#">Ver div1</a>
<a href="#">Ver div2</a>
<a href="#">Ver div3</a>
<a href="#">Ver div4</a>

quisiera saber como hacer el llamado para que me muestre el contenido de cada div sin tener que recurrir a cargara la pagina con php sino que solo cambie el div via javascript :(

Me ayudan?

creo que es algo como esto:

Código Javascript:

Ver originalfunction div_ver() {
    if document.getElementById('div1').style.display="inline"
    } else {
    document.getElementById('div1').style.display="none"
    }

y el div llamarlo asi?:

Código HTML:

Ver original<div id="div1">Aqui mi con etindo del div1</div>

alguna sugerencia?

IsaBelM · #2 (**permalink**) 13/12/2010, 13:52

no tienes que ocupar javascript para hacerlo. Usa css

function · #3 (**permalink**) 13/12/2010, 14:00

css?

pero si tengo varios divs, como hago para llamar a dichos divs con css?, pensé que lo podria volver dinamico con javascript, asi podria mostrar el que yo quiera o no?

IsaBelM · #4 (**permalink**) 13/12/2010, 14:08

se puede hacer también con javascript, pero si tienes la posibilidad de hacerlo con css, es mas conveniente, por diversos motivos

Cita:

<html>
<head>
<style type='text/css'>
ul li{
position:relative;
float:left;
width:4em;
border-bottom:1px solid #FF0000;
list-style:none;
}

ul li div{
position:absolute;
left:0px;
display:none;
border:1px solid #FF0000;
width:100px;
height:100px;
}

a{
display:block;
text-align:center;
text-decoration:none;
}

li:hover div{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href="">Ver div1</a><div>Aqui mi contenido del div1</div></li>
<li><a href="">Ver div2</a><div>Aqui mi contenido del div2</div></li>
<li><a href="">Ver div3</a><div>Aqui mi contenido del div3</div></li>
<li><a href="">Ver div4</a><div>Aqui mi contenido del div4</div></li>
</ul>
</body>
</html>

function · #5 (**permalink**) 13/12/2010, 14:14

Cita:

Iniciado por IsaBelM

se puede hacer también con javascript, pero si tienes la posibilidad de hacerlo con css, es mas conveniente, por diversos motivos

Esta muy bien lo que tu me dices, pero no quiero que se muestre solamente cuando tenga el mouseover, sino el div completo, ya que contiene informacion, lo que quiero es algo que se mueva dinamicamente sinque tenga que recargar ñla pagina, he hecho esto, pero no sale nada:

Código Javascript:

Ver originalfunction div_element() {
    if (document.getElementById('div1').style.display="block");
    document.getElementById('div2').style.display="none";
}

pero sol he llegado hasta ahí, no se si habrás comprendido lo que quiero hacer?

IsaBelM · #6 (**permalink**) 13/12/2010, 14:24

no comprendo a que te refieres cuando dices "o quiero que se muestre solamente cuando tenga el mouseover, sino el div completo" o cuando dices "que se mueva dinámicamente"

function · #7 (**permalink**) 13/12/2010, 14:33

Cita:

Iniciado por IsaBelM

no comprendo a que te refieres cuando dices "o quiero que se muestre solamente cuando tenga el mouseover, sino el div completo" o cuando dices "que se mueva dinámicamente"

A lo mejor me exprese mal y lo siento por ello, mira es simple lo que quiero hacer (para los que sepan), quiero mostrar el contenido de un div el cual he llamado previamente mediante un ancla (<a href="javascript()" o <a onclick="funcion()..)

el cual me llamará al div el cual se quedara como bloque (display:block) para ver la informacion y asi poder ver el contendio de cada div segun el cual el susuario quiera ver y haya llamado, no se si me hago comprender del todo.

ejemplo:

Código HTML:

Ver original<a href="#" onclick="funcion_verdiv('div1')">Ver Div 1</a>
<a href="#" onclick="funcion_verdiv('div2')">Ver Div 2</a>
<a href="#" onclick="funcion_verdiv('div3')">Ver Div 3</a>

el cual al hacerl click en el anc la que quiera ver, me mostrara el divo y su respectivo contenido:

Código HTML:

Ver original<div id="div1">Este es el contenido del div 1</div>
<div id="div2">Este es el contenido del div 2</div>
<div id="div3">Este es el contenido del div 3</div>

Pero lo que quiero conseguir es como hago una funcion en javascript para que me muestre el div que he seleccionado.

Tu me pusiste en css, que mostrara el contenido del div como si fuera un :hover parecido a la funcion de javascript mouseover, pero mi intención es que se muestre el contenido al hacer click en el ancla y no que solamente se muetre al pasar el mouse, me entiendes ahora?

function · #8 (**permalink**) 13/12/2010, 14:39

Mira lo conseguí siguiendo este ejemplo:

http://www.cesarcancino.com/Mostrar-...script-n2.html

Espero que al verlo me entiendas, y si se te ocurre alguna otra opcion mejor o diferente, avisame, me interesa mucho

de todas maneras muchisimas gracias por tu aporte

function · #9 (**permalink**) 13/12/2010, 14:44

Ahora!!! lo que si no se que hacer es como dejar un div como predeterminado, es decir que el div 1 se muestre por default?, como podria hacer alguna idea?

IsaBelM · #10 (**permalink**) 13/12/2010, 14:47

perdona que te lo diga así, pero se puede mejorar mucho ese código. dame unos minutos y te muestro algo

function · #11 (**permalink**) 13/12/2010, 15:42

Cita:

Iniciado por IsaBelM

perdona que te lo diga así, pero se puede mejorar mucho ese código. dame unos minutos y te muestro algo

Que bueno, si crees que se puede mejorar, miremos a ver, ya que como dije antes de javascript poco y todo en cuanto vea será de aprendizaje.

Gracias nuevamente

function · #12 (**permalink**) 13/12/2010, 15:59

Tienes razón este codigo no me sirvió ya que cuando se navega entre vinculos se muestran casi todos los divs :( :(

IsaBelM · #13 (**permalink**) 13/12/2010, 16:06

perdona, me surgió algo. esto es lo que he hecho a bote pronto. si tienes alguna pregunta ...

Cita:

<html>
<head>
<title>.:: ::..</title>
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
for (var n = 0; n < links.length; n++) {
document.getElementById(links[n].name).style.display = (this.name == links[n].name) ? 'block' : 'none';
}
return false;
}
}
}
</script>
</head>

<body>
<a href="#" name="div_1">Uno</a>
<br>
<a href="#" name="div_2">Dos</a>
<br>
<a href="#" name="div_3">Tres</a>
<div id="div_1" style="display:none">Primer contenido</div>
<div id="div_2" style="display:none">Ahora vemos el segundo contenido</div>
<div id="div_3" style="display:none">y finalmente vemos el tercer contenido</div>

</body>

</html>

function · #14 (**permalink**) 13/12/2010, 16:36

mmm noi se ni que has hecho :( pero se ve en menos codigo y eso me gusta, podrias comentar las lineas para aprender?

IsaBelM · #15 (**permalink**) 13/12/2010, 17:00

la explicación es mas o menos esta

Cita:

// cuando la página se carge se ejecuta el primer ciclo
window.onload = function() {
// aquí sacamos una colección con todos los links que hay en la página
var links = document.getElementsByTagName('a');
// se ejecuta el primer ciclo. la iteración es desde 0 hasta el largo de links, en este caso 3. este ciclo solamente se ejecuta una vez. cuando la página está cargada
for (var i = 0; i < links.length; i++) {
// asignamos un evento a cada vinculo, así nos evitamos invocar una función desde los vinculos
links[i].onclick = function() {
// al pulsar sobre cualquier vinculo, se ejecuta este otro ciclo para recorrer todos los vinculos, tal como en el primer ciclo
for (var n = 0; n < links.length; n++) {
// esto es una codicional para asignar el estado del div
// esta parte, (this.name == links[n].name), dice: si el nombre del vinculo pulsado (this.name) es igual al nombre del vinculo con indice "n" (links[n].name)
// por ejemplo si pulsas en primer vinculo, this.name y links[0] es igual a div_1
// ? 'block' : 'none'; esto otro dice que en caso que se cumpla la anterior condición, el div se muestre "block" si no se cumple "none"
document.getElementById(links[n].name).style.display = (this.name == links[n].name) ? 'block' : 'none';
}
// con este return se evita que el vinculo se comporte como tendría que hacerlo, es decir redireccionar a otra página
return false;
}
}
}

function · #16 (**permalink**) 13/12/2010, 17:08

Cita:

Iniciado por IsaBelM

la explicación es mas o menos esta

Genial, se ve facil cuando se lee la explicación, aunque llegar a eso, veo que me hace falta, de todas maneras lo voy a implementar para ver si me sirve.

No se si ya te dije Gracias, pero en caso de que no lo haya hecho GRACIAS GRACIAS GRACIAS GRACIAS

y en caso de que ya lo haya hecho
GRACIAS GRACIAS GRACIAS GRACIAS