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

【问题标题】：load php code with jquery on navbar在导航栏上使用 jquery 加载 php 代码
【发布时间】：2017-10-05 20:11:22
【问题描述】：

这是我的情况：由于导航栏，我正在尝试将 php 代码注入 div。但没有任何改变。当我单击链接“li”时，它应该加载它自己的 php 页面。例如，如果我点击“Print”，它将显示“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>

【问题讨论】：

标签： php jquery navbar

【解决方案1】：

您在链接上的 href 会覆盖 li 点击，而不是您可以放置的链接：<a href="javascript:void(0);">。

您真的想在每个li 中添加您将点击的内容？？

【讨论】：

【解决方案2】：

只需删除锚标记，因为您甚至点击了 li。您将文件名构造为

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

【讨论】：

【解决方案3】：

问题是；您没有捕获单击的元素 ID 或类，因为它们都是唯一的，所以它们都无关紧要。现在这必须是班级，或者您可以将其更改为 ID。您还需要删除<a> 标签。您可以从这里检查 sn-p 以了解它是如何工作的。

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;
      }
     });

【讨论】：

是的，没错，当我点击一个链接时，它只做点击功能，没有任何变化，现在我明白为什么了。

【解决方案4】：

谢谢大家的回复。我做了这段代码并且工作正常：

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

【讨论】：