Jquery divs

Zendar · #1 (**permalink**) 26/11/2010, 15:22

Hola a todos! estoy aprendiendo a usar jquery y me gustaria que me ayuden a lograr mi primer script!

Lo que deseo hacer es lo siguiente:

tengo un div que contiene una lista con categorias, cada categoria es un <a href=#

Bien, lo que quiero lograr es q presionando cualq categoria de la lista, aparezca la info que consierne a esa categoria en un div al costado de la lista.

Me explico?

espero q puedan orientarme asi puedo empezar!

gracias!

mayid · #2 (**permalink**) 27/11/2010, 09:51

Primero necesitas un selector para tus links. Por id o por class name preferentemente.

Luego tenes que definir un evento click. Si tu selector es por class name la tenes facil.

Siendo que todos tus enlaces tienen asociado un evento, lo que falta es que definas una accion dentro del evento click, que dirá mas o menos esto:
- muestra contenidos relacionados en un div
- return false (esto es para evitar que el enlace te lleve a otra pagina, y darle prioridad al evento click).

Si mostrás avances, la seguimos. Pero no pidas todo hecho desde cero. En todo caso, publica tu html (y el codigo jquery que tengas ya escrito).

Saludos!

Zendar · #3 (**permalink**) 29/11/2010, 10:40

Muchas gracias Mayid! Con tu informacion puedo empezar.... apenas tenga algun avance lo voy a esatr publicando!

HelaVonOsten · #4 (**permalink**) 01/12/2010, 13:19

Hola, no sé si debería abrir un nuevo post ya que mi duda es similar a la de zendar pero al querer cargar desde un menu javascript una galeria en un div. O plasmo mi ignorancia aqui??

HelaVonOsten · #5 (**permalink**) 02/12/2010, 08:00

Hola otra vez, espero estar haciendo bien al postear aquí. Mi situación es similar a la de zendar pero lo que se quiere cargar en el lateral es una galería jquery.
Tengo un menú javascript y una galeria jquery:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css">
<link rel="stylesheet" type="text/css" href="menu.css" />
<script type="text/javascript" src="jquery.ad-gallery.js"></script>
<script type="text/javascript" src="menu.js"></script>

<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc');
$('img.image1').data('ad-title');
$('img.image4').data('ad-desc');
$('img.image5').data('ad-desc');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>

<script type="text/javascript">
var menu0= new Desplegable();
menu0.items = new Array(["item-0","javascript:;","Primer elemento"],["item-1","javascript:;","Segundo elemento"],["item-2","javascript:;","Tercer elemento"]);//,["item-3","javascript:;","Cuarto elemento"]//
menu0.subitems = new Array([["subitem-0","javascript:;","1Primer subelemento"],["subitem-1","javascript:;","1Segundo subelemento"],["subitem-2","javascript:;","1Tercer subelemento"]],
[["subitem-0","javascript:;","2Primer subelemento "],["subitem-1","javascript:;","2Segundo subelemento"],["subitem-2","javascript:;","2Tercer subelemento"]],
[["subitem-0","javascript:;","3Primer subelemento"],["subitem-1","javascript:;","3Segundo subelemento"],["subitem-2","javascript:;","3Tercer subelemento"]],
[["subitem-0","javascript:;","4Priemer subelemento"],["subitem-1","javascript:;","4Segundo subelemento"],["subitem-2","javascript:;","4Tercer subelemento"]]);
</script>
<title></title>
</head>
<body>
<div id="contenedor">
<div id="logo"><img src="images/logo.jpg" width="89" height="91"></div>
<div id="encabezado"></div>
<div id="menu"><body onLoad="menu1.escribeacordeon('menu',25,5);" ></div>

<div style="padding-left: 50px">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"> </div>
<div class="ad-controls"> </div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li> <a href="images/fotos/1.jpg"><img src="images/thumbs/_th1.jpg"class="image0"> </a> </li>
<li> <a href="images/fotos/2.jpg"><img src="images/thumbs/_th2.jpg"class="image1"> </a> </li>
<li> <a href="images/fotos/3.jpg"><img src="images/thumbs/_th3.jpg"class="image2"> </a> </li>
<li> <a href="images/fotos/4.jpg"><img src="images/thumbs/_th4.jpg"class="image3"> </a> </li>
<li> <a href="images/fotos/5.jpg"><img src="images/thumbs/_th5.jpg"class="image4"> </a> </li>
<li> <a href="images/fotos/6.jpg"><img src="images/thumbs/_th6.jpg"class="image5"> </a> </li>
<li></li>
<li></li>
<li></li>

</ul>
</div>
</div>
<div id="descriptions">Cras facilisis purus ac enim rutrum cursus. Praesent scelerisque vestibulum volutpat. Sed tellus ipsum, fermentum ut sollicitudin ut, molestie ac mi? Proin cursus, tortor vitae varius vehicula, velit mi molestie nulla, ac pharetra risus quam eget odio. </div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>Lo que quiero hacer es, al igual que zendar conseguir que al hacer clic en cada subítem del menú me lleve a las galeria respectiva, para ello y buscando en internet he optado por utilizar jquery, el script necesario creo es:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>
<script>
$(document).ready(function()
{
$(".spanMenu").each(function()
{
var href = $(this).attr("href");
$(this).click(function(){
$("#content").load(href); });
});
});
</script>

El problema es que no sé cómo implementarlo, ya que la galería se compone de varios divs.
Espero que podáis echarme un cable!!!
Gracias!