奇妙なリンクの挙動

Question

私はAJAXを使用してWebページのコンテンツをロードしたいのですが...

私は私が欲しいものを行うための最善の方法をやったかわからないので、jQueryの基本的に新たなんだ、とURLを書き換える#!を使用して恒久的なURLを作る、それはいくつかのリンクを除き、良い作品...

ここ（ページ全体/ CSS/JS HERE用）ページの短いプレビュー、<div id="undertop">作業良いのリンクが、 <div id="listlabel">の他のものは機能しませんでした。理由はわかりません。

HTML

<div id="undertop"> 
     <a class="undertop" href="#!/news/Running">Home</a> 
</div> 
<div id="container">  
<div id="blog"> 
    <div class="post">          
     <a href="blablabla">Read More...</a>                
    </div> 
</div>   
<div id="listlabel"> 
     <a class="labelbox" href="#!/news/Running">Running (10)</a><br><br><br> 
     <a class="labelbox" href="#!/news/Corsa">Corsa (5)</a><br><br><br> 
     <a class="labelbox" href="#!/news/PC" >PC (4)</a><br><br><br> 
     <a class="labelbox" href="#!/news/Altro" >Altro (2)</a><br><br><br>    
</div> 

`

jQueryのスクリプト

$(document).ready(function(){ 
    $(document).getUrl(window.location.hash,"#container");  

    $('a').click(
     function(){ 
     alert('clicked'); //debug 
      $(this).getUrl($(this).attr('href'),"#container"); 
     } 
    ); 
}); 

機能のgetURL

$.fn.getUrl = function(urlpass,whereadd){ 
    $(whereadd).html("<div class='ajaxloader'><img src='images/ajax-loader.gif'></div>");  
    var val=urlpass.split("#!");  
    val = val[val.length-1];  
    val = val.split("/"); 
    if(val[1]==null) val[1]="news";   
     $.ajax({ 
      url: val[1]+".php", 
      type: "POST", 
      data: "tag="+val[2], 
      cache: false, 
      success: function(html){ 
      $(document).find(whereadd).html(html); 
     } 
    }); 
} 

は、あなたがより多くのHTMLをロードしている、私が言うことができるものから、事前

Answer 1

にありがとうそれらの奇妙なリンクをドキュメントに入れますが、あなたはt彼は再び変換機能を使用します。

全体として、と完全に反対のはunobtrusive JavaScriptです。

あなたのページの内容は、JS経由でしかアクセスできません。これはアクセシビリティとSEOにとって悪いことです。

JavaScriptを使用してすべてのコンテンツを読み込むのではなく、古い古い/foo/barリンクの静的ページを提供する必要があります。次に、JSが有効になっている場合は、ページロードのすべてのリンクを取得し、AJAX経由でコンテンツをロードするためのクリックハンドラを割り当てます。

このようにして、あなたはAJAXのかっこいいものを手に入れます。と JavaScriptがない場合はまともな作業ページです。

semantic layoutもご覧ください。

適用される上記の技術の例については恥知らずなプラグ
、私のWIP portfolio siteで見てください。