在导航栏上用jquery加载php代码

Question

This is my case : i'm trying to inject a php code into a div thanks to a navbar. But nothing changes. When i click on a link "li" it is supposed to load it's own php's page. For example if i click on "Print" it will show the "print.php"

Thank you for your help

<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

Thank you all for your reply. I did this code and works fine :

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