Question

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

我仍然有很多要改变，直到它完全满足我的要求，但这是我刚刚上传的设计的当前版本，以帮助您了解设计。

因此，您可以看到它专注于复古，复古，色带和墨水元素。

知道我想摆脱这些抽搐的内容刷新。所以我认为通过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中，您可以在ribbon-menue上注册点击事件。在每次单击时，您从html-part中的给定link-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>

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

通过AJAX进行动态内容交换

1 个答案: