charger le code php avec jquery sur navbar

Question

C'est mon cas: j'essaie d'injecter un code php dans un div grâce à une barre de navigation. Mais rien ne change. Quand je clique sur un lien "li" il est supposé charger sa propre page php. Par exemple, si je clique sur « Imprimer » il affichera la « print.php »

Merci pour votre aide

<nav class="hidden-xs hidden-sm col-md-12 navbar navbar-inverse"> 

<div class="collapse navbar-collapse" id="filtre"> 
    <ul class="nav navbar-nav"> 
    <li class="index" id="index"><a href="index.php">Tous</a></li> 
    <li class="print" id="print"><a href="print.php">Print</a></li> 
    <li class="illustration" id="illustration"><a 
href="illustration.php">Illustration</a></li> 
    <li class="logotype" id="logotype"><a href="logotype.php">Logotype</a> 
</li> 
    <li class="web" id="web"><a href="web.php">Web</a></li> 
    <li class="photographie" id="photographie"><a 
href="photographie.php">Photographie</a></li> 
    </ul> 
</div> 

</nav> 
<script> 
$('#filtre').on('click', 'li', function(e) { 
    var item = e.target; 

switch (item.id) { 
case 'index': 
    $('#index').load('index.php'); 
    break; 
case 'print': 
    $('#print').load('print.php'); 
    break; 
case 'illustration': 
    $('#illustration').load('illustration.php'); 
    break; 
case 'web': 
    $('#web').load('web.php'); 
    break; 
case 'photographie': 
    $('#photographie').load('photographie.php'); 
    break; 
    } 
}); 
</script> 

Answer 1

Merci à tous pour votre réponse. Je l'ai fait code et fonctionne très bien:

<script> 
     $(document).ready(function(){ 
     $('#filtre li').click(function(){ 
     $('#content-data').load('./'+$(this).attr("class")+'.php', function() { 
     $('#content-data').fadeIn('slow') ; 
    }); 
     return false; 
    }); 
    }) 
    </script> 

Answer 2

votre href sur le lien écrasera le clic li, au lieu le lien que vous pouvez mettre: <a href="javascript:void(0);">.

Et vous voulez vraiment mettre du contenu à l'intérieur de chacun li que vous cliquez ??

Answer 3

Le problème est que; Vous n'avez pas capturé l'ID des éléments cliqués ou la classe, ce qui importe peu, car ils sont tous les deux uniques. Maintenant, cela doit être dans la classe ou vous pouvez le changer comme ID. Vous devez également supprimer les balises <a>. Vous pouvez vérifier l'extrait d'ici pour voir comment cela fonctionne.

View DEMO

$('#filtre').click(function(e){ 
     var item = $(e.target).attr('class'); 

    switch (item) { 
    case 'index': 
     $('#index').load('index.php'); 
     break; 
    case 'print': 
     $('#print').load('print.php'); 
     break; 
    case 'illustration': 
     $('#illustration').load('illustration.php'); 
     break; 
    case 'web': 
     $('#web').load('web.php'); 
     break; 
    case 'photographie': 
     $('#photographie').load('photographie.php'); 
     break; 
     } 
    }); 

Answer 4

supprimer simplement balise d'ancrage puisque vous avez cliquez sur le même li. Vous construisez le nom de fichier comme

switch (item) { 
    .... 
    $('#'+item).load(item+'.php'); 
    ... 
}