Question

我基本上是jquery的新手，所以我不确定我是否采取了最好的方式来做我想要的...

我想使用ajax在网页中加载内容，并使用#!创建一个永久网址来重写网址，除了某些链接外，它的效果很好......

此处是页面的简短预览（针对整个页面/ 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);
      }
  });
}

提前谢谢

Answer 1

据我所知，您正在将更多带有这些奇怪链接的HTML加载到文档中，但您没有再次调用转换函数。

总的来说，你的方法是unobtrusive JavaScript的完全相反。

现在您的页面内容只能通过JS访问。这对可访问性和SEO不利。

您应该提供具有良好旧/foo/bar链接的纯静态页面，而不是通过JavaScript加载所有内容。然后，在启用JS的情况下，抓取页面加载的所有链接并分配单击处理程序以通过AJAX加载内容。

通过这种方式，您可以获得精彩的AJAX内容 AND ，这是一个体面的工作页面，以防万一没有JavaScript。

我还建议您查看semantic layout。

无耻插头
有关上述技术的示例，请查看我的在制品portfolio site。

奇怪的链接行为

1 个答案: