通过AJAX动态内容交换

Question

现在只有这么多：我正在为自己创建一个vcard设计。我的动机是让它看起来尽可能好。我想申请这个vcard的网页设计公司来获得专业的网页设计教育。

我还有很多事情要改变，直到它完全达到我的要求，但这是我刚刚上传的设计的当前版本，以便您对设计进行概述。

所以，你可以看到它专注于复古，复古，丝带和scetch元素。

我知道我想摆脱这些颠簸的内容刷新。所以我认为通过ajax和jQuery进行动态内容交换是实现它的最佳方式。

我从来没有做过很多与js或实际上ajax。

我想问你们一个你认为在我的设计中有什么好处的解决方案。我在想事情顺利。

需要被改变的内容被放置在

<nav> 
(...) 
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"--> 
<li class="ribbon-content"><a href="?content=main">Link</a></li> 
<!-- 
?content=blog 
?content=portfolio 
?content=lebenslauf 
?content=kontakt 
--> 
</ul> 
(...) 
</nav> 
<section id="content"> 
<div class="con clearfix"> 
(...) 
</div><!--An empty div for possibly swapping without touching the vintage paper thing --> 
</section> 

http://robert-richter.com/boilerplate/

Answer 1

例如使用jQuery。

首先将jquery添加到您的html中。在domready事件中，您可以在ribbon-menue上注册点击事件。在每次点击时，您都会从html-part中的给定链接url加载div-content。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$.ready(function(){ 
    $(".ribbon-content a").on("click", function(event){ 
     event.preventDefault(); 
     $(".con").load($(event.target).attr("href"), function(){ 
      // add code after loading - for example change classes of menue 
     }) 
    }); 
}) 
</script> 

additionly您可以在浏览器的历史，使浏览器的prev-和下一个按钮。