navbarのjqueryを使ってPHPコードをロードする

Question

これは私の場合です：私はnavbarのおかげでdivにPHPコードを注入しようとしています。しかし何も変わりません。私はリンク "リチウム"をクリックすると、それは自分のPHPのページをロードするはずです。私は「印刷」をクリックした場合例えば、それは「print.php」

がリンク上

<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

となります。ご返信ありがとうございます。 私はこのコードを行なったし、正常に動作します：

は

<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

あなたのhrefは、Liクリック、することができます代わりにリンクを上書きご協力いただきありがとうござい表示されますput：<a href="javascript:void(0);">。

そして、あなたは本当にそれぞれの中にコンテンツを入れたいですか？liあなたはクリックしますか？

Answer 3

問題はそれです。クリックされた要素IDまたはクラスをキャプチャしていなかったのは、両方が一意であるため重要ではありません。今これはクラスに入る必要があります。そうしないと、IDとして変更できます。また、<a>個のタグを削除する必要があります。スニペットを確認して、その仕組みを確認することができます。

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

あなたは李にも、クリックしているので、ちょうどアンカータグを削除します。ファイル名は

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