Problème en jQuery : Lien sur #id caché [Résolu]

Bonjour a tous

Etant débutant dans le monde de la création de site web, j'aimerai un peu d'aide si possible de votre part.

Je vous expose mon probleme :

Voila j'ai deux page html, la 1ere Accueil.html et la 2eme Prestation.html

Sur la 1ere page j'ai 3 liens respectifs :

- Dépannage : <a id="Lien_Dep" ........

- Installation : <a id="Lien_Install" .........

- Formation : <a id="Lien_Form" ........

et sur la 2eme, 3 block dont deux caché

- Block_Col_Dep : Visible

- Block_Col_Install : Caché

- Block_Col_Form :Caché

Je voudrais pouvoir rendre visible chaque bloc de la page prestation en cliquant sur les lien de la page accueil et en cachant les 2 autre restant

J'ai réussit a le faire en slideshow sur la page prestation avec les 3 même lien tjs sur la page prestation.

Mais impossible de réussir a le faire d'une page a une autre, a chaque fois, j'arrive sur le bloc visible c'est a dire celui concernant le bloc dépannage.

Je vous remercie d'avance pour vos conseil et en esperant avoir ete assez clair sur mon petit probleme

Cordialement
Modifié par htmladem_666 (07 Mar 2013 - 07:25)

Salut,
Fais voir ton code html ?
Sinon je ne sais pas si j'ai bien compris ce que tu veux faire mais je vois deux solutions:

en javascript/jquery : en faisant passer par l'url la div à rendre visible.
en php : url avec $_GET.

Avec ton code html, je pourrais être plus précis.
+++

Voici le code :

Code page 1

<div class="Block_Prim">
<div class="Module_left">

<h1 class="Lien_Dep"> <!--LIEN -1-->
<a href="Prestation.html" title="Dépannage Informatique"> <!--LIEN A METTRE POUR LA PAGE DEP INFO-->
<strong>Dépannage</strong>
</a>
</h1>

<div class="Mod_Img_Dep">
<img class="Img_Dep" width="218" height="120" src="images/Section/Img_Dep.png" alt="Dépannage Informatique"/>
</div>
</div>
<div class="Module_middle">

<h1 class="Lien_Install"> <!--LIEN 2-->
<a href="#" title="Installation Informatique">
<strong>Installation</strong>
</a>
</h1>

<div class="Mod_Img_Install">
</div>
</div>
<div class="module_right">
<h1 class="Lien_Form"> <!--LIEN 3-->
<a href="#" title="Formation Informatique">
<strong>Formation</strong>
</a>
</h1>
<div class="Mod_Img_Form">
<img class="Img_Form" width="218" height="120" src="images/Section/Img_Form.png" alt="Formation Informatique"/>
</div>
</div>
</div>


Code Page 2 : ou il y les block cacher

<section> <!--DEBUT "Section"-->
<div id="Section">
<nav class="Nav_Section">
<div id="Mod_Presta_Dep">
<div class="Lien_Prim">
<h1 class="Lien_Prim">
<a href="#" title="Dépannage Informatique"> <!--LIEN A METTRE POUR LA PAGE DEP INFO-->
<strong>Dépannage</strong>
</a>
</h1>
</div>
</div>
<div id="Mod_Presta_Install">
<div class="Lien_Prim">
<h1 class="Lien_Prim">
<a href="#" title="Installation Informatique"> <!--LIEN A METTRE POUR LA PAGE INSTALL INFO-->
<strong>Installation</strong>
</a>
</h1>
</div>
</div>
<div id="Mod_Presta_Form">
<div class="Lien_Prim">
<h1 class="Lien_Prim">
<a href="#" title="Formation Informatique">
<strong>Formation</strong>
</a>
</h1>
</div>
</div>
</nav>
<div class="Block_Col"> <!--MENU DES PRESTATIONS GENERALES-->
<div id="Block_Col_Dep" > <!--MENU DEPANNAGE-->
<div class="Block_Col_1">
<div class="highlight-box"> <!--Lien : togglecontrol_Dep-1-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Dep-2-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Dep-3-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Dep-4-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Dep-5-->
</div>
</div>
<div class="Block_Col_2">
<div id="toggleP"> <!--Cadre : ToggleP-->
</div>
<div id="toggleP-1"> <!--Cadre : ToggleP_1-->
</div>
<div id="toggleP-2"> <!--Cadre : ToggleP_2-->
</div>
<div id="toggleP-3"> <!--Cadre : ToggleP_3-->
</div>
<div id="toggleP-4"> <!--Cadre : ToggleP_4-->
</div>
</div>
</div>
<div id="Block_Col_Install"> <!--MENU INSTALLATION-->
<div class="Block_Col_1">
<div class="highlight-box"> <!--Lien : togglecontrol_Install-1-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Install-2-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Install-3-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Install-4-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Install-5-->
</div>
<div class="Block_Col_2">
<div id="toggleI"> <!--Cadre : ToggleI-->
</div>
<div id="toggleI-1"> <!--Cadre : ToggleI_1-->
</div>
<div id="toggleI-2"> <!--Cadre : ToggleI_2-->
</div>
<div id="toggleI-3"> <!--Cadre : ToggleI_3-->
</div>
<div id="toggleI-4"> <!--Cadre : ToggleI_4-->
</div>
</div>
</div>
<div id="Block_Col_Form"> <!--MENU FORMATION-->
<div class="Block_Col_1">
<div class="highlight-box"> <!--Lien : togglecontrol_Form-1-->

</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Form-2-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Form-3-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Form-4-->
</div>
<div class="highlight-box"> <!--Lien : togglecontrol_Form-5--> <!--A voir-->
</div>
</div>
<div class="Block_Col_2">
<div id="toggleF"> <!--Cadre : ToggleF-->
</div>
<div id="toggleF-1"> <!--Cadre : ToggleF_1-->
</div>
<div id="toggleF-2"> <!--Cadre : ToggleF_2-->
</div>
<div id="toggleF-3"> <!--Cadre : ToggleF_3-->
</div>
<div id="toggleF-4"> <!--Cadre : ToggleF_4-->
</div>
</div>
</div>
</div>
</div> <!--Fin Div Section-->
</section>

Dc en gros ce que je voudrais :

Lien -1 va afficher #Block_Col_Dep : c'est celui qui est tout le tps afficher
Lien -2 va afficher #Block_Col_Install : Lui reste cacher
Lien -3 va afficher #Block_Col_Form : Lui est cacher aussi

Pour mieux voir cela : www.ts-informatique.co et non .com

Re,
J'ai pas regardé tous le code de ton site mais je trouve que tu t'es compliqué la vie sur certaines choses. Quelques exemples:

-Dans ta page prestation :
Pourquoi avoir fais une Bloc_page avec un margin négatif de -51px.
Tu peux mettre ta navigation nav dans le header.
Il y a des h1 de partout même si avec les nouveaux éléments hmtl5, on peux en mettre plus; la je trouve que ta sémantique n'est pas bonne.
Beaucoup de div aussi. Par exemple pour dépannage, installation et formation, tu utilise:

<nav class="Nav_Section">
			<div id="Mod_Presta_Dep">
			<div class="Lien_Prim">
				<h1 class="Lien_Prim">
				<a href="#" title="Dépannage Informatique">  <!--LIEN A METTRE POUR LA PAGE DEP INFO-->
					<strong>Dépannage</strong>
				</a>
				</h1>
			</div>
<!-- ... ->
</nav>

Ce qui pas mal aussi c'est de mettre ses scripts juste avant la fermeture de la balise body.
http://www.alsacreations.com/astuce/lire/916-librairie-javascript-jquery-script.html
http://performance.survol.fr/2008/04/javascript-a-sa-place/

En gros, je trouve que tu n'utilise pas correctement les balises. Tu pourrais alléger ton code et utiliser à meilleur escient les balises.
http://www.siteduzero.com/informatique/tutoriels/la-semantique-1

Mais cela n'est pas ton problème.
Pour ta question :

<a href="prestation.html?page=depannage"> Dépannage </a>
<a href="prestation.html?page=installation"> Installation</a>
<a href="prestation.html?page=formation"> Formation</a>

En jquery on récupère l'url et on traite selon les infos reçu:

/* On récupère la valeur du paramètre.
    Avec location.search on obtient ?page=installation(ou depannage ou formation);
    Avec split('='), on coupe la chaine au caractére = et on obtient un tableau ou 
     t[o] est = à ?page et t[1]= installation(ou depannage ou formation).
*/
var t = location.search.split('=');
// Ensuite on teste est selon le cas on affiche telle ou telle div
if(t[1]==='installation'){
 // Instructions
}
else if(t[1]==='depannage'){
 // Instructions
}
else if(t[1]==='formation'){
 // Instructions
}
else{
 // Instructions
}

Voila une piste pour t'aider. Écrit ton code et poste le pour voir ce que ça donne.

Ressource:
http://www.xul.fr/ecmascript/parametres.html
http://forum.alsacreations.com/topic-5-31802-1-Recuperer-un-parametre-durl-en-javascript.html
http://www.aliasdmc.fr/coursjavas/cours_javascript79.html
++++

Bonsoir Renard13

Merci pour tes info, en faite c'est la toute 1ere fois que je code d'ou les differente erreur mais tjs prenneur de bon conseil pour m'amelioré

Pour ce qui est de mon problème j ai po tout saisie tes explication etant vraiement amateur mais je vais essayer de test.

Par contre le script j le copy ds herder ou ds body ?

Merci d'avance

Re,
Fais des tests et poste ton code et on pourras t'aider. Comme ça, tu t'améliorera plus vite que si on te donne le code tous fait.

Le plus performant est d'inclure ses script js juste avant la fermeture de la balise body.

En faite j comprend pas tes lien :

<a href="prestation.html?page=depannage"> Dépannage </a>
<a href="prestation.html?page=installation"> Installation</a>
<a href="prestation.html?page=formation"> Formation</a>

car depannage - Installation et Formation ne sont pas des page mais simplement 3 block d une meme page dont 2 sont cacher suivant sur quel lien je click

Mais j peux avoir rien compris aussi de ton cheminement.

J'ai vraiement besoin de comprend, apres j pourrai faire le code car j fait pas partie des gens qui veulent qu'on leur fasse tous sans rien comprendre

Pour mon code j'ai copier la structure principal d'ou le nbre de div et supprimé le reste
Merci d'avance de ton aide et du tps sacrifier pour un nooby comme moi


Une chose de sur c'est que j'ai vraiement envie d'apprendre le but est de finir ce site pour ouvrir une activé plus visé dans mes domaine de l'info il y a 6 mois je connaissait rien en html et css d'ou les problemes de structure
Modifié par htmladem_666 (04 Mar 2013 - 18:34)

Ca c'est tes liens sur la page 1 => page accueil.

<a href="prestation.html?page=depannage"> Dépannage </a>
<a href="prestation.html?page=installation"> Installation</a>
<a href="prestation.html?page=formation"> Formation</a>

Corresponds dans ta page d'accueil au lien :

<h1 class="Lien_Dep">			<!--Lien_Prim Ancien class""-->
<a href="[#red]prestation.html?page=depannage[/#]" title="Dépannage Informatique">  <!--LIEN A METTRE POUR LA PAGE DEP INFO-->
<strong>Dépannage</strong>
</a>
</h1>
<!-- Pareil pour les autres -->

prestation.html?page=mot => prestation.html amène à ta page prestation.
Le ? permet d'indiquer le début de la variable. Ensuite on lui indique le nom du bloc que l'on veut rendre visible (=> Dépannage, formations ou installation) sur la page prestation.

Avec le js, on récupère l'information (location.search), ce qui permet de savoir quel bloc rendre visible et lesquels caché.(=> instructions).

Si j'ai bien compris ce que tu veux faire ?

si j ai bien compris ds le js que tu m'as proposé :

/* On récupère la valeur du paramètre.
Avec location.search on obtient ?page=installation(ou depannage ou formation);
Avec split('='), on coupe la chaine au caractére = et on obtient un tableau ou
t[o] est = à ?page et t[1]= installation(ou depannage ou formation).
*/
var t = location.search.split('=');
// Ensuite on teste est selon le cas on affiche telle ou telle div
if(t[1]==='installation'){
// Instructions
}
else if(t[1]==='depannage'){
// Instructions
}
else if(t[1]==='formation'){
// Instructions
}
else{
// Instructions
}

je remplace installation, depannage et formation par l'id de la div qui doit s'afficher ?

La valeur récupérée dans location.search vient des liens de ta page d'accueil =>
Lien : dépannage
Lien : installation
Lien : formation
On indique cela pour savoir quel bloc tu dois afficher sur ta page préstation.
/* On récupère la valeur du paramètre.
Avec location.search on obtient ?page=installation(ou depannage ou formation);
Avec split('='), on coupe la chaine au caractére = et on obtient un tableau ou
t[o] est = à ?page et t[1]= installation(ou depannage ou formation).
*/
var t = location.search.split('=');
// Ensuite on teste est selon le cas on affiche telle ou telle div
// t[1]==='installation', t[1]==='depannage' et t[1]==='formation', servent à tester sur quel lien l'internaute à cliqué sur la page accueil. Ce qui permet de savoir quel bloc rendre visible ou cacher.
if(t[1]==='installation'){
// Instructions => Ici tu écrit en jquery qu'il faut afficher ton bloc correspondant à celui que tu souhaite rendre visible quand l'internaute à cliqué sur installation.
Et tu cache les autres.
}
else if(t[1]==='depannage'){
// Instructions => Ici tu écrit en jquery qu'il faut afficher ton bloc correspondant à celui que tu souhaite rendre visible quand l'internaute à cliqué sur dépannage.
Et tu cache les autres.
}
else if(t[1]==='formation'){
// Instructions => Ici tu écrit en jquery qu'il faut afficher ton bloc correspondant à celui que tu souhaite rendre visible quand l'internaute à cliqué sur formation.
Et tu cache les autres.
}
else{
// Instructions => ici l'internaute n'a cliqué sur aucun des liens ci dessus mais sur d'autres liens qui mènent à cette page. Tu décide quel bloc tu veux rendre visible ou cacher.
}

C'est plus clair comme ça ?
Est que j'ai bien compris ce que tu veux faire ? => Afficher le bloc correspondant au lien cliquer sur ta page d'accueil et cacher les autres.
Modifié par renard13 (04 Mar 2013 - 19:13)

Oui tu as tout a fait compris ce que je voulais, et tes explication sont plus clair et est compris le cheminement du code dc j vais test cela et te tiens au courrant

J testerai demain matin et te dirai le resultat

Merci pour ton aide

re bonjour

J'aurai encor une tite question, au niveau de l'instruction pour faire apparaotre le block que je souhaite faut il utilisé se genre de ligne :

$("#Block_Col_Install").hide('slow');$("#Block_Col_Form").hide('slow');

Une simple question, j met un peu de tps car j suis entrain de relire les lien que tu m'as linker.

Cordialement

j pense avoir compris le truc mais j peche un peu au niveau de l'instruction a mette :
Faut il utilisé .hide et .show pour faire cela ou d'autre solution existe ?

bonsoir bon voila ce que j ai fait mais apparamant aucun resultat :

script type="text/javascript">
var t = location.search.split('=');
if(t[1]==='installation')
{
$('#Block_Col_Install').show();
$("#Block_Col_Dep").hide();
$("#Block_Col_Form").hide();
}

else if(t[1]==='depannage')
{
$("#Block_Col_Dep").show();
$('#Block_Col_Install').hide();
$("#Block_Col_Form").hide();
}
else if(t[1]==='formation')
{
$("#Block_Col_Form").show();
$("#Block_Col_Dep").hide();
$("#Block_Col_Install").hide();
}
else
{ // Instructions
}
</script>

Je voit bien mes lien pointer ds la ligne url, mais aucun changement au niveau de la visibilité des block

Dc quand j e clic sur n'importe quel des 3 lien j ai tjs le block Depannage qui s'affiche Grrrrrr

Merci d'avance pour l'aide
Modifié par htmladem_666 (05 Mar 2013 - 18:27)

Bonjour

Je reviens apres pas mal de test, tout t'es fonctionnel comme je le désirai.

Encore Merci à toi renard13 pour le debut de piste

Mon code solution :

<script type="text/javascript">
var t = location.search.split('=');
if(t[1]==='.Lien_Dep')
{
document.getElementById('Block_Col_Dep').style.visibility="visible";
$("#Block_Col_Install").css( {display:"none"});
$("#Block_Col_Form").css( {display:"none"});
}

else if(t[1]==='.Lien_Install')
{
document.getElementById('Block_Col_Install').style.visibility="visible";
$("#Block_Col_Dep").css( {display:"none"});
$("#Block_Col_Form").css( {display:"none"});
}
else if(t[1]==='.Lien_Form')
{
document.getElementById('Block_Col_Form').style.visibility="visible";
$("#Block_Col_Dep").css( {display:"none"});
$("#Block_Col_Install").css( {display:"none"});
}
</script>

Voila et encore merci
Cordialement

Salut

J'ai eu exactement la même problématique mais en utilisant des ancres.
Ma solution, récupérer l'ancre et agir en fonction avec le JQuery :

<script type="text/javascript">
$(document).ready(function(){
	var hash = window.location.hash.substring(1);

	if (hash == 'lien-un') {
		$('#contenu-un').css({'display':'block'});
		$('#contenu-deux').css({'display':'none'});
	}

	if (hash == 'lien-deux') {
		$('#contenu-un').css({'display':'none'});
		$('#contenu-deux').css({'display':'block'});
	}
});

</script>

Je propose ma solution et la tienne (en cours) sur mon site.

Salut,
Félicitation, avec un peu d'insistance et après avoir passé les envies de jeter son ordinateur, on trouve toujours une solution.

Du coup pour finir le topic, je te mets des liens qui pourront te servir :
http://geekos.fr/02/2012/jquery-astuces-et-conseils-pour-ameliorer-les-performances/
https://case.oncle-tom.net/2007/jquery-optimisation-selecteurs-css/
http://blog.arnaud-k.fr/2009/10/26/5-conseils-pour-developper-avec-jquery/

Bonne continuation ++++

Bonsoir

Escusez moi de ma longue abscence, mais la c'est pour un formulaire de contact, et etant debutant dc j me renseigne sur le php, pour la verif java c'est good, depuis mon post j ai compris la logique.

@Gilforge : J'ai pas test ta solution, puis honnetement j me suis telement pris la tete comme le dit si bien RENARD13 dc j prefere garde la mienne

@Renard13 : Merci bien pour m'avoir eclairé, j ai pas regarder t'es lien mais ds mes favoris

Encore Merci, me reste mon formulaire mais c'est en bonne voit