很抱歉问了一个简单的问题，因为我还在学习 html/css/js。我想要做的是能够点击这个由css和js组成的div类的按钮，加载它的内容而不刷新页面，我认为这需要ajax或jquery，但不知道如何。这是我的 github 页面 danielroberto.github.io 和 repo https://github.com/danielroberto/danielroberto.github.io 所以你可以明白我的意思。我基本上想点击任何导航按钮，然后加载我想要的任何内容，而不重定向到全新的 html 页面。例如，当我想点击“摄影”按钮时，我希望按钮效果在我的图像加载到底部时发生，而不是重定向到像摄影.html 之类的东西。类似于单击“设计”按钮，我希望它转换并加载我的内容。
【问题讨论】：
标签： javascript jquery html css ajax
网上有大量资源可以帮助您了解 AJAX 的介绍 - 一种加载网页部分而不是全部内容的技术。
您正确地建议您可以使用 jQuery JavaScript 库来执行此操作 - 有很多替代方法，但它很容易学习，并且在网络上被广泛使用。久经考验！
从这里开始：http://www.w3schools.com/jquery/jquery_ajax_intro.asp
只有在您计划使用某些服务器端技术来提供图像时才会这样。
如果您只是要手动设置要显示的图像列表，并且希望按钮循环显示这些图像，那么您最好使用 jQuery carousel 插件构建某种轮播，并且从一开始就将其全部包含在您的 HTML 标记中。可供选择或从中获得灵感的负载：https://plugins.jquery.com/tag/carousel/。
此外，您应该调整图片大小以适合您为它们提供服务的屏幕。我建议你看看使用srcset。你在测试网站上的图片是 4600px 宽！看看这个：https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
希望一切顺利。早期工作可能会很辛苦，但您很快就会掌握窍门。
【讨论】：
您可以将内容存储在 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));
}
【讨论】：
您可以在使用 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');
});
【讨论】：