オーバーライド<a href=""> jquery.loadを使用してコンテンツを取得する場合

Question

Iveはいくつかのページを持っていますが、内容はすべて異なり、ページはすべて相対パスタグを使用してナビにリンクされています。ユーザビリティの観点からは、他のページからコンテンツを取得してメインのインデックスページにロードするためにjquery .loadを使用するのが良いでしょう。だから、ページを変更する必要がwouldntの..私は希望

が行うショーです：

<a id="show-services" href="our_services.html">OUR SERVICES</a>

JSとSEO /ユーザーがオフtunredが、actualy（怒鳴る）を使用して、コンテンツをロードするために、ユーザビリティのために/ uiを目的

google.load("jquery", "1.6.2"); 

google.setOnLoadCallback(function() { 
$("#show-services").click(function(){ 
    $(".content").load("our_service.html .content"); 
    return false; 
    }); 
}); 

ので.LOADはクモはまだサイト構造を参照するようにHTMLタグが（表示されていても。

HTMLにタグをオーバーライドしてい

歓声

Answer 1

あなたが探しているのはe.stopPropagationまたはe.preventDefaultだと思います。これにより、イベントがjsで適用されているため、イベントがバブリングするのを防ぐことができます。つまり、アンカーをクリックするアクションです。ユーザーがjsを有効にしていない場合、コードは実行されないため、アクションはフォールバックしてデフォルトの動作を固定します。

$("#show-services").click(function(e){ 
    e.preventDefault; 
    $(".content").load("our_service.html .content"); 
    return false; 
    }); 
}); 

Answer 2

your'reがあなたのページにこのように動作し、複数のリンクを持っているつもりならば、私はあなたが一括してそれらすべてをターゲットにすることができますように、それらをすべて特定のクラス名を与えることをお勧めしたい：

$("nav").on("click", ".asyncLoad", function(event){ 
    event.preventDefault(); 
    $(".content").load(event.target.href + ' .content'); 
}); 

これは、リンクがすべて<nav>要素内にある前提としています

<nav> 
    <ul> 
    <li><a class="asyncLoad" href="home.html">Home</a></li> 
    <li><a class="asyncLoad" href="our_services.html">Our Services</a></li> 
    <li><a class="asyncLoad" href="contact_us.html">Contact us</a></li> 
    </ul> 
</nav>