Question

我对网页设计很陌生。我刚刚完成了我的第一个静态网站。我不喜欢的是页面经常重新加载（每次更改部分）

我的问题是“如何制作这种导航：http://www.doblin.com/work/#innovation-strategy”

正如您所看到的，当您点击“设置创新战略/设计，构建+启动创新/成为更好的创新者”时，页面不会重新加载

怎么做？

是否可以在没有sql的静态网站（html / css / jquery）上（可能需要ajax或......）？

由于

Answer 1

看一下（硬）看JQuery或Dojo，其中任何一个都是你的朋友。

您的示例使用JQuery。

可以在一个静态页面上完成，无需担心。

这里有一些演示：http://jqueryui.com/tabs/

您还可以在http://w3schools.com/jquery/default.asp

上学习jquery

Answer 2

您可以在静态网站上使用Jquery。你可以通过以下链接 Jquery

但是如果您希望保存数据并从服务器检索，那么您需要使用Ajax来避免刷新页面。有很多关于如何使用Ajax的教程

Answer 3

看一下代码，这个页面使用了一些jQuery函数来完成这项工作，请查看：

$(window).hashchange( function(){

    var hash = location.hash;

    // if a hash has been set
    if(hash !== '') {

        showContent(hash, origSections);

    } else {

        // pass in "empty" hash
        showContent('', origSections);

    }


    return false;

});

// call hashchange on initial page load
$(window).hashchange();


// ----------- SHOW CONTENT  ----------- //
function showContent(active, all) {

    if (jQuery.support.opacity) {
        opacity = true;
    } else {
        opacity = false;
    }

这也可以使用CSS3过渡和动画来完成。这是基于pen Codrops教程的this。我特别认为这是一种更好的方法

但是如果你想从某个地方获取动态数据，我建议你使用Ajax（有一些很酷的jQuery东西来处理这个）

加载页面的一部分而不刷新它

3 个答案: