18041 sujets

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

Affichage dans le meme cadre dans la meme page html

Bonjour,

J'ai dans ma page html un menu vertical qui contient 4 titres (4 onglets)
Je veux que lorsque je clique sur l'un d'eux le contenu s'affiche dans un cadre qui se situe au milieu de cette page et ce contenue se change en fonction de l'onglet sur lequel j'ai cliqué !

Quelqu’un pourra m'aider?
Bonjour,

Pour ce faire il suffit d'avoir le même squelette de page pour toutes tes pages et de faire un lien vers la page adéquate.

Dans le temps on utilisait les frames, mais ce n'est vraiment plus nécessaire.
Modifié par Laurie-Anne (17 Oct 2012 - 08:34)
je suis arrivée à ce bout de code mais ça marche pas !! 


<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html >
<head id="Head1" runat="server">
    <title>accueil</title>
     <link href="../../StyleCSS.css" type="text/css"    rel="stylesheet" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#menud a').click(function () {
            // récupére le title du lien     
            var title = $(this).attr('title');
            var url = '';
            switch (title) {
                case 'janv':
                    url = 'includes/janv.html';
                    break;
                case 'fev':
                    url = 'includes/fev.html';
                    break;

                //etc, un case par mois 
                default:
                    url = 'includes/janv.html';
            }
            $('#chargement').hide().load(url, function () {
                //appel de la fonction facultative       
                charge();
                $(this).fadeIn();
            });
            return false;
        });
    });
    // fonction facultative, affiche un gif animé pendant l'attente du chargement 
    function charge() {
        var loader = $('<img/>').attr({ 'src': 'images/loader.gif', 'alt': 'Chargement en cours... Please wait...' });
        $('<div id="loader">' + loader + ' Chargement en cours... please wait, load in progress...</div>')
   .insertBefore('#chargement')
   .ajaxStart(function () {
       $(this).show();
   }).ajaxStop(function () {
       $(this).hide();
   });
    }
</script>



</head>




<body>

    <div id="wrapper">
	<div id="container">
 
 
    <div id="menud">             
	<ul>
	    <!-- les titles des liens servent de base pour les chargements -->
		<li><a href="#" title="janv">janvier</a></li>
		<li><a href="#" title="fev">f&eacute;vrier</a></li>
        </ul>
        </div>


<div id="chargement">
	
</div>


     </div>
   <footer>
  <ul>
     
     <li>carte du site</li>
     <li>contactez-nous</li>
     <li>retour au début de la page</li>
  </ul>
</footer>
</div>
    </body>
</html>
Sujet clos
Aller à