Javascript 如何在不刷新页面的情况下通过单击div类按钮加载html

很抱歉问了一个简单的问题，因为我还在学习html/css/js。我想做的是能够点击这个按钮，这是一个由css和js组成的div类，在不刷新页面的情况下加载它的内容，我相信这需要ajax或jquery，但不确定如何进行。这是我的github页面和回购协议，你可以理解我的意思。我基本上想点击任何导航按钮，然后加载任何我想要的内容，而不必重定向到整个新的html页面。例如，当我想点击“photography”按钮时，我希望在图像加载到底部时，按钮效果会发生，而不会重定向到photography.html之类的内容。类似于点击“设计”按钮，我希望它能转换并加载我的内容。

网络上有大量的资源来获取AJAX所需的介绍-加载网页的一部分而不是整个内容的技术

您正确地建议可以使用jQueryJavaScript库来实现这一点——有很多替代方法，但这很容易学习，并且在网络上得到了广泛的应用。久经考验

从这里开始：

只有当您计划使用一些服务器端技术来提供图像时，才会出现这种情况

如果您只是想手动设置要显示的图像列表，并且希望按钮在这些列表中循环，那么您最好使用jQuery旋转木马插件构建某种旋转木马，并从一开始就将其包含在HTML标记中。可从中选择或从中获得灵感的负载：

此外，您应该调整图像的大小，以适合您提供图像的屏幕。我建议您考虑使用

srcset

。您在测试站点上的图像宽度为4600px！看看这个：

---

我希望一切顺利。早期的工作可能很辛苦，但您很快就会掌握窍门。

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

HTML

---

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

HTML

看看谷歌的“Ajax教程”。是的，OP@DanielRoberto“需要Ajax或jquery”不是Ajax或jquery——jquery是一个可以帮助您实现Ajax的库。您也可以在无库的普通js中使用ajax，这需要更多的工作。

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

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

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

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

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