Question

我很抱歉问一个简单的问题，因为我还在学习html / css / js。我想要做的是能够点击这个由css和js制作的div类的按钮，加载它的内容而不刷新页面，我认为这需要ajax或jquery，但不知道如何。这是我的github页面danielroberto.github.io和回购https://github.com/danielroberto/danielroberto.github.io，这样你就可以了解我的意思。我基本上想要点击任何导航按钮，然后加载我想要的任何内容，而无需重定向到全新的html页面。例如，当我想点击“摄影”按钮时，我希望按钮效果发生在我的图像加载到底部而不重定向到photography.html之类的东西。与单击“设计”按钮类似，我希望它转换并加载我的内容。

Answer 1

网上有大量资源可以获得AJAX所需的介绍 - 加载网页部分而不是整个网页的技术。

您正确地建议您可以使用jQuery JavaScript库来执行此操作 - 有许多替代方案，但这很容易学习，并且在网络上广泛使用。试过并经过测试！

从这里开始：http://www.w3schools.com/jquery/jquery_ajax_intro.asp

只有当您计划使用某种服务器端技术来提供图像时才会这样做。

如果您只是想手动设置要显示的图像列表，并且您希望按钮循环显示这些图像，那么您最好只使用jQuery carousel插件构建某种旋转木马，并且从头开始将它全部包含在HTML标记中。负载可供选择或受到启发：https://plugins.jquery.com/tag/carousel/。

此外，您应该调整图像大小以适合您为其提供的屏幕。我建议您使用srcset。您在测试网站上的图像宽度为4600像素！看看这个：https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

我希望它顺利。早期的工作可能很艰苦，但你很快就会掌握它。

Answer 2

使用jQuery

单击按钮时，可以轻松编辑元素的html

HTML

    <div class="my-button">click here</div>
    <div class="my-content">init content</div>

JS

    contentElement = $('.my-content');

    $('.my-button').click(function() {
      contentElement.html('new content');
    });

https://jsfiddle.net/jaxon58/zp9mvu38/

Answer 3

您可以将内容存储在js中的var中。然后，当您单击按钮时，您可以调用创建文本节点或元素的函数，并将其附加到div。

HTML

<button onClick="function()"></button>
<div id="show-data">
</div>

JS

var newText = 'Stuff here';
function function() {
    var div;
    div = document.getElementById('show-data');
    div.appendChild(document.createTextNode(newText));
}

如何在没有页面刷新的情况下单击div类按钮来加载html

3 个答案: