Afficher ou cacher des elements de la page.
Salut. J'ai conçu deux pages, la premiere permet de lister des sous-menu qui amène vers la deuxieme page qui consiste à afficher ou cacher des elements de la page selon le contenu de la barre d'adresse. Pour mieux comprendre je vais vous presenter les deux codes.
le premier code:
<ul id="menu">
<li>
<a href="#">Actualités</a>
<ul>
<li><a href="actualites.php#journal_afrique">Le Journal TV de l'Afrique</a></li>
<li><a href="actualites.php#journal_monde">Le Journal TV du Monde</a></li>
<li><a href="actualites.php#nouvelles_accra">Les Nouvelles d'Accra</a></li>
</ul>
</li>
</ul>le deuxieme code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A propos de Nous</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/style1.css">
<link rel="stylesheet" href="style/style_common.css">
<script language="javascript" type="text/javascript">
function bascule(elem)
{
etat=document.getElementById(elem).style.display;
if(etat=="none"){
document.getElementById(elem).style.display="block";
}
else{
document.getElementById(elem).style.display="none";
}
}
</script>
</head>
<body>
<div id="bloc_page">
<div class="sous_menu_tv" style="background: #f1f1f1;">
<h1 id="journal_afrique"><a href="" onclick="bascule('1'); return false;">Le Journal TV de l'Afrique</a></h1>
<div id='1' style='display:none;'>
<div>
<video controls width="400">
<source src="videos/publicite.webm" />
</video>
</div>
<div>
<video controls width="400">
<source src="videos/lenquete_du_jt.webm" />
</video>
</div>
</div>
</div><hr/>
<div class="sous_menu_tv">
<h1 id="journal_monde"><a href="" onclick="bascule('2'); return false;">Le Journal TV du Monde</a></h1>
<div id='2' style='display:none;'>
<div>
<video controls width="400">
<source src="videos/parlons_le_français.webm" />
</video>
</div>
</div>
</div><hr/>
<div class="sous_menu_tv" style="background: #f1f1f1;">
<h1 id="nouvelles_accra"><a href="" onclick="bascule('3'); return false;">Les Nouvelles d'Accra</a></h1>
<div id='3' style='display:none;'>
<div>
<video controls width="400">
<source src="videos/le_journal.webm" />
</video>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Je veux juste etablir un système permettant de monter le contenu de la rubrique en cours et de cacher les autres.
Par exemple si l'utilisateur se trouve sur la premiere page et clique sur la rubrique "Le Journal TV du Monde", il est redirigé vers la deuxieme avec comme url "actualites.php#journal_monde" où on affiche seulement le contenu de la rubrique Le Journal TV du Monde et on cache le contenu des autres rubrique.
J'espere avoir été assez comprehensible pour obtenir de l'aide.
merci d'avance
3 réponses
Salut,
Tu fais une div vide qui contiendra ton contenu, ensuite tu fais un appel ajax sur le click de ton lien qui se chargera de chercher le contenu que tu souhaite afficher.
En gros :
1 : <div id="content"></div>
2 : appel ajax qui appel va chercher le contenu ( soit en php avec une BDD ou un fichier contenant directement le contenu )
3 : en cas de success tu ajoute se contenu a ta div content ( en jQuery voir fonction append() )
4 : ne pas oublier de re-vider le contenu de ta div lors d'un autre appel ajax sinon le contenu s'ajoutera a la suite. ( en jQuery $('div#content).empty() )
et justement sa tombe bien car Grafikart viens de faire un tuto sur l'ajax.
Sinon autre solution vue que tu as mis tout ton contenu sur la même page, tu fais un test sur le lien qui a était cliqué et selon le lien tu affiche ( .show() ) ou tu cache ( .hide() ) les différents contenus.
par default tu en laisser un afficher et cacher les autres en css avec un display : none
En espérant que c'est ce que tu veux faire et que cela t'aidera, bonne continuation
Ahhhh je connais rien en ajax et jquery. mais merci. tu n'as pas une autre solution?