Forum : can't display correctely the page with ajax

bonjour
Mon probleme est le suivant : j utilise les memes page pour les evenement mouseover et clique. alors lorsque j clique sur un lien et je passe la souris sur lien , les pages sont imbriquées les une des autres.

et voici page index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Accueil</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../css/bootstrap.min.css"/> <link rel="stylesheet" href="../css/style.css"/> <link rel="stylesheet" href="../css/responsive.css"/> </head> <body > <div class="container"> <header class="main-header"> <div class="row" id="top-header"> <img class="logo col-lg-2 " src="../img/logo.png" alt="ARTMATIC"/> <form class="form-inline">  <div class="input-group col-sm-3 col-lg-offset-1" style="margin-bottom:-130px"> <input type="text" class="form-control" placeholder="Search for..." style="margin-top:4px"> <span class="input-group-btn"> <a href="#" class=" btn btn-danger glyphicon glyphicon-search" ></a> </span> </div>  </form>  <form class="navbar-form navbar-right inline-form pull-right"> <div class="form-group"> <input type="search" class="input-sm form-control" placeholder="Recherche"> <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button> </div> </form>  </div>   <div class="container-fluid "> <div id="main-menu"> <nav class=" navbar navbar-inverse "> <ul class="nav navbar-nav" > <li class="menu-greuna"> <a href="ramette-papier.php" class="menu-white">Ramettes de papier</a> </li> <li class="menu-rose" > <a href="cartouche-consomable.php">Cartouches & Consommables</a> </li> <li class="menu-vert"> <a href="informatique.php" >Informatique</a> </li> <li class="menu-bleu"> <a href="classement.php">Classement & Archivage</a> </li> <li class="menu-orange"><a href="fourniture.php">Fourniture scolaire</a></li> </ul> </nav> <div id="contenu-menu"> <?php $d="contenu-menu/"; if(isset($_GET['p'])){ $p=strtolower($_GET['p']); if(preg_match("/^[a-z0-9]+$/",$p) && file_exists($d.$p.".php")){ include $d.$p.".php"; } else{ include $d."404.html"; } } else{ include $d."index.html"; } ?> </div> </div> </div> </header> <div id="content"> </div>  </div> </body> <footer> </footer> <script src="../js/jquery-1.12.0.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/navigation.js"></script> <script> $(document).ready(function(){ $('.content').click(function(){ /*$('#contenu-menu').empty();*/ alert ('bonjour'); }); }); </script> </div> </body> </html>

$(document).ready(function(){ $("#main-menu a").bind('mouseover focus',function(){ page=$(this).attr("href"); $("a ").removeClass('active'); $(this).addClass('active'); $.ajax({ url: "contenu-menu/"+page, cache:false, success:function(html){ afficher(html); }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert(textStatus); } }) return false; }); $("#main-menu a").bind('click',function(){ page=$(this).attr("href"); $("a ").removeClass('active'); $(this).addClass('active'); $.ajax({ url: "contenu-menu/"+page, cache:false, success:function(html){ $('#content').empty().append(html).fadeIn(500); $('[class="col"]').css('width',' 410px'); $('[class="col"]').css('line-height','40px'); $('[class="col"]').css('margin-bottom','10px'); $('[class="col"]').css('margin-right','13px'); $('section').css('background-color','red'); }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert(textStatus); } }) return false; }); $(".container").hover(function(){ $('#contenu-menu').empty().fadeOut(500); }); $("#content").hover(function(){ $('#contenu-menu').empty().fadeOut(500); }); function afficher(data) { $('#contenu-menu').empty().append(data).fadeIn(500); } });

merci pour votre aide

can't display correctely the page with ajax

4 réponses