通过 AJAX 进行动态内容交换

Question

现在只有这么多：我正在为自己创建一个 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-event 中，您可以在功能区菜单上注册点击事件。每次单击时，您都会从 html 部分中的给定链接 URL 加载 div 内容。

<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>

此外，您可以使用浏览器历史记录来启用浏览器的上一个和下一个按钮。