所有链接都以div而不是某些链接打开

Question

在bootstrap中，我正在使用制表符将div中的不同内容加载到同一页面，而不是将href链接到新页面。 工作正常，但是当我点击页面中其他位置的href链接时，内容也会加载到此div而不是正常的href链接。

echo '<div class="container">
    <ul class="nav nav-tabs">
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/calculaties.php?id='.$row['id'].'">Calculaties</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/offertes.php?id='.$row['id'].'">Offertes / bevestigingen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/bestellingen.php?id='.$row['id'].'">Bestellingen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/vrachtbrieven.php?id='.$row['id'].'">Vrachtbrieven</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/facturen.php?id='.$row['id'].'">Facturen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/producten.php?id='.$row['id'].'">Producten</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/certificaten.php?id='.$row['id'].'">Certificaten</a></li>
    </ul>
</div>';

<script type="text/javascript">
// Load div in click
$(document).ready(function () {
    $('a').click(function (e) {
        e.preventDefault();
        $("#content").load($(this).attr('href'));
    });
});

// Change class on click
$(".clickable").click(function () {
    $('.clickable').removeClass('active')
    $(this).addClass("active");
});
</script>

Answer 1

您正在将点击事件附加到页面上的所有链接。尝试给出应该具有此行为的链接，例如.hasContent，然后使用jQuery定位它：

$(document).ready(function(){
   $('a.hasContent').click(function(e){
      e.preventDefault();
      $("#content").load($(this).attr('href'));
   });
});

编辑：正如@Derek指出的那样，如果菜单中的所有链接都应该像这样工作，那么通过包装器定位它是更好的方法。

Answer 2

使用此代码解决了这个问题：

echo '<div class="container">
    <ul class="nav nav-tabs">
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/calculaties.php?id='.$row['id'].'" class="loaddiv">Calculaties</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/offertes.php?id='.$row['id'].'" class="loaddiv">Offertes / bevestigingen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/bestellingen.php?id='.$row['id'].'" class="loaddiv">Bestellingen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/vrachtbrieven.php?id='.$row['id'].'" class="loaddiv">Vrachtbrieven</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/facturen.php?id='.$row['id'].'" class="loaddiv">Facturen</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/producten.php?id='.$row['id'].'" class="loaddiv">Producten</a></li>
      <li role="presentation" class="clickable"><a href="includes/dossier_detail/certificaten.php?id='.$row['id'].'" class="loaddiv">Certificaten</a></li>
    </ul>
</div>

<script type="text/javascript">
// Load div in click
$(document).ready(function(){
$(".loaddiv").click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
</script>

<script type="text/javascript">
// Change class on click
 $(".clickable").click(function() {
    $('.clickable').removeClass('active')
    $(this).addClass("active");
  });
</script>