divの特定のリンクの代わりにすべてのリンクが開かれています

Question

ブートストラップでは、divで別のコンテンツをロードするためにタブで作業しています。 正常に動作しますが、ページ内の他の場所のhrefリンクをクリックすると、通常のhrefリンクとして機能する代わりに、このdivにコンテンツも読み込まれます。

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

は、このコードでそれを解決：。

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> 

Answer 2

あなたは、ページ上のすべてのリンクにクリックイベントを装着しています。 jQueryを使ってそれを.hasContentのように、この動作の追加クラスがあり、その後、ターゲットとすべき与えるのリンクをお試しください：

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

編集：@Derekが指摘したように、メニュー内のすべてのリンクは次のように動作する必要がある場合は、ラッパーにより、それをターゲットにより良いアプローチです。