Comment lier des actions à des liens dans jQuery?

Question

Je travaille sur un site web qui a une navigation en miniature sur notre page, et pour chaque personne que vous cliquez, son profil est affiché dans la même case. Ensuite, en cliquant sur «fermer» en bas du profil, vous revenez aux vignettes.

Jusqu'à présent, j'ai les divs suivants ...

<div class="container"> 

    <div class="thumbnails"></div> 
    <div id="profile-1"></div> 
    <div id="profile-2"></div> 
    <div id="profile-3"></div> 
    <div id="profile-4"></div> 

<div> 

A l'intérieur du div nommé "personnes" J'ai ...

<ul> 
    <li class="thumbnail-1"><a href="#">Profile 1</a></li> 
    <li class="thumbnail-2"><a href="#">Profile 2</a></li> 
    <li class="thumbnail-3"><a href="#">Profile 3</a></li> 
    <li class="thumbnail-4"><a href="#">Profile 4</a></li> 
</ul> 

Ma pensée était de positionner tous les divs absolument ils sont les uns sur les autres et ensuite masquer tous les profils sur le chargement du document.

Ensuite, lorsque vous cliquez sur une vignette, liez un affichage: block et z-index: 100 au profil correspondant, ce qui force le profil à s'afficher au-dessus des vignettes.

Ma question est serait-ce la meilleure façon de faire cela? De quel jquery ai-je besoin pour générer ce comportement afin qu'il supprime les propriétés css créées lorsque le bouton de fermeture est cliqué?

Un grand merci pour votre temps et votre aide.

Answer 1

Essayez Demo

Je viens de réaliser que vous vouliez tout le contraire de ce que je mets au départ, mais pour une: il serait bon de nommer votre identifiant de votre divs le nom exact pour votre balise d'ancrage sous forme de texte ainsi, et aussi afin d'avoir un texte à cliquer sur quelque chose doit être à l'intérieur de votre div:

<div id="container"> 
<div class="thumbnails"></div>//I don't even use this, so if you don't use it for something else you can get rid of this line 
<div id="Profile-1">first one</div> 
<div id="Profile-2">second one</div> 
<div id="Profile-3">third one</div> 
<div id="Profile-4">fourth one</div> 
</div> 
<ul id="thumbnails"> 
<li><a href="#">Profile-1</a></li> 
<li><a href="#">Profile-2</a></li> 
<li><a href="#">Profile-3</a></li> 
<li><a href="#">Profile-4</a></li> 
</ul> 

$(function(){ 
$('#container').hide(); //hide the links in the list 
$('#thumbnails a').click(function(){ // bind the li's click event 
var id = $(this).text(); 
$("#container div").each(function() { 
    if($(this).attr("id") == id) 
    { 
    $(this).show().parent().show(); 
    } 
    else 
    { 
    $(this).hide(); 
    } 
    }); 
}); 
}); 

Answer 2

Ne faites pas cela. Il suffit de montrer/les cacher comme vous devez:

$("#thumbnails a").click(function() { 
    var id = "profile" + this.id.substring(1); 
    $("#container").children().hide(); 
    $("#" + id).show(); 
    return false; 
}); 

en supposant que ce qui suit, qui a légèrement changé:

<div id="container"> 
    <div class="thumbnails"></div> 
    <div id="profile-1"></div> 
    <div id="profile-2"></div> 
    <div id="profile-3"></div> 
    <div id="profile-4"></div> 
<div> 

et

<ul id="thumbnails"> 
    <li><a id="t-1" href="#">Profile 1</a></li> 
    <li><a id="t-2" href="#">Profile 2</a></li> 
    <li><a id="t-3" href="#">Profile 3</a></li> 
    <li><a id="t-4" href="#">Profile 4</a></li> 
</ul> 

La raison est que vous voulez mettre aussi peu de marqueur HTML que possible. Vous pouvez encore changer cela en supprimant les ID des liens si vous pouvez supposer que vous pouvez déduire l'ID de la position dans la liste. C'est juste une modification possible.

L'utilisation d'ID semble appropriée lorsque vous marquez des éléments de page comme des conteneurs et des miniatures. La recherche ID est beaucoup, beaucoup plus rapide que les alternatives.

Answer 3

Vous pouvez également essayer de modifier votre code HTML de la manière que le profil et la vignette sont dans la même construction.

<ul> 
    <li class="person"> 
     <div class="thumbnail"></div> 
     <div class="profile"></div> 
    </li> 
</ul> 

Vous pouvez toujours utiliser le positionnement absolu pour le div.profile: s, mais votre javascript serait plus facile (et sans aucune manipulation de chaîne nécessaire) car vous avez seulement besoin de trouver un élément de frères et soeurs.

$('div.thumbnail').click(
    $('div.profile').removeClass('visible'); // hide any visible profiles 
    $(this).siblings('div.profile').addClass('visible'); // show the adjacent profile 
); 

(L'exemple ci-dessus suppose que la classe CSS div.profile.visible est utilisé pour afficher un profil.