18041 sujets

Questions générales et questions de débutants

Textes avec jquery

Bonjour

Sur un site (mon cv) que je retravaille, je souhaiterai pouvoir dans la partie experiences
mettre deux blocs
- un avec les liens correspondant à chaque entreprise et quand on clique sur un de ces liens
le contenu de l'expérience apparaitrait dans l'autre
cela parlera mieux avec une image

Je pense pouvoir me débrouiller avec le css
upload/39001-imagealsa.jpg


Comme je n'ai pas de compétences en Js, je tendrais plutôt vers une solution " clés en mains"
Bien évidement Google est mon ami, j'ai effectivement fait des recherches dans ce sens avant de venir vous enquiquiner la vie mais comme je ne sais pas trop comment nommer cet effet
Je m'en remets à vous


D'avance merci beaucoup

Je reste à votre disposition
Modifié par sergemarie69 (25 Jul 2011 - 16:48)
Salut,

Tu peux le faire avec du JQuery:

var text1 = "ici tu mets la description professionnelle de ton expérience 1";

var text2 = "ici tu mets la description professionnelle de ton expérience 2";

var text3 = "ici tu mets la description professionnelle de ton expérience 3";

function updateText(text){
$('#description').fadeOut(100,function(){
$('#description').html(text);
});
$('#description').fadeIn();
};

puis sur ta page html, t'appelles la fonction updateText() sur ton lien en mettant en paramètre le texte que tu souhaites voir apparaître.
J'ai ici utilisé une fonction fadeOut et fadeIn pour donner un effet de fondu (tu peux si tu le souhaites t'en passer).

a+
Re-

Je te remercie de ta réponse rapide cependant dans les faits cela se déroule comment, c'est-a-dire ou je mets les différentes portions de codes
Comme je l'ai écrit, je ne connais pas les rudiments du javaS, je sais simplement qu'il
faut appeler le script avant la fermeture de la balise </head>
mais concrètement je fais comment ??.

Je connais la fonction Fade, tu me donnes un exemple sur le mot ici mais le lien ne marche pas

D'avance merci encore
Tu copie-colle le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var text1 = "ici tu mets la description professionnelle de ton expérience 1";

var text2 = "ici tu mets la description professionnelle de ton expérience 2";

var text3 = "ici tu mets la description professionnelle de ton expérience 3";

function updateText(text){
$('#description').fadeOut(100,function(){
$('#description').html(text);
});
$('#description').fadeIn();
};
</script>
</head>
<body>
<table>
<tr>
<td>
<div>
<span onclick="updateText(text1)">lien 1</span><br/>
<span onclick="updateText(text2)">lien 2</span><br/>
<span onclick="updateText(text3)">lien 3</span>
</div>
</td>
<td style="width:200px;">
</td>
<td>
<p id="description">
ici la description de ton texte
</p>
</td>
</tr>
</table>
</body>
</html>
Merci à tous les deux

Je connais Babylone et c'est aussi un excellent site

Je vais tacher de tester les deux méthodes

Si pb, je reviens vers vous
merci encore

sergemarie69 Smiley biggrin
Sujet clos
Aller à