Javascript 在不加载页面的情况下交换内部库和HTML

一个相对简单的问题，虽然对我来说并不简单

我需要在不使用不同页面的情况下交换内容。我需要为一个画廊做这个，它的缩略图

这正是我的意思：

---

我确实在研究中看到了一些答案，但都使用了JS和其他东西。我不知道最简单的方法是什么，因此非常感谢您的帮助。

您应该通过纯JavaScript或jQuery（或其他框架）使用AJAX。看看这个：

你可以看到这篇文章：

这里有一些“lightbox”和基于JS的图库的示例。

要解决我的问题：

使用Jquery在单击“下一个”和“上一个”链接时隐藏和显示特定的div

<script>

$(document).ready(function(){
$(".galleryContent div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$("#next").click(function(){
    if ($(".galleryContent div:visible").next().length != 0)
        $(".galleryContent div:visible").next().show().prev().hide();
    else {
        $(".galleryContent div:visible").hide();
        $(".galleryContent div:first").show();
    }
    return false;
});

$("#prev").click(function(){
    if ($(".galleryContent div:visible").prev().length != 0)
        $(".galleryContent div:visible").prev().show().next().hide();
    else {
        $(".galleryContent div:visible").hide();
        $(".galleryContent div:last").show();
    }
    return false;
});
});

</script>

<div class="galleryContent">
          <!---group 1--->
             <div class="cls1">

             <ul>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery_1/gallery_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_1/gallery_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
            </ul>

             </div>

             <!---group 2--->
             <div class="cls2">
             <ul>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
                <li><a href="images/gallery/gallery2_large.jpg" data-lightbox="philips" title="Ain't nothing but a peanut!"><img src="images/gallery/gallery_2/gallery2_placeholder.jpg" width="162" height="150" alt="placeholder"></a></li>
            </ul>
             </div>

$（文档）.ready（函数（）{
$（“.galleryContent div”）。每个（函数（e）{
如果（e！=0）
$（this.hide（）；
});
$（“#下一步”）。单击（函数（）{
if（$（“.galleryContent div:visible”）.next（）.length！=0）
$（.galleryContent div:visible”）.next（）.show（）.prev（）.hide（）；
否则{
$（“.galleryContent div:visible”）.hide（）；
$（“.galleryContent div:first”）.show（）；
}
返回false；
});
$（“#prev”）。单击（函数（）{
if（$（“.galleryContent div:visible”）.prev（）.length！=0）
$（“.galleryContent div:visible”）.prev（）.show（）.next（）.hide（）；
否则{
$（“.galleryContent div:visible”）.hide（）；
$（“.galleryContent div:last”）.show（）；
}
返回false；
});
});

Ajax是您必须尝试的！谢谢大家，我已经实现了一个Lightbox，特别是我正在寻找一个新的15个缩略图，我在我的列表项目中有一套新的15个缩略图交换到同一个div中。我将研究与Ajax和JqueryHi的家伙做这件事，发现这个非常光滑的插件，我希望能解决我的问题！我不喜欢这个解决方案，因为浏览器必须在加载页面时加载所有图像。使用ajax可以避免这种情况。作为最低要求，我会实现一些延迟加载的图像。是的，但我认为这是可以的，只要你不制作大量的缩略图画廊。因为我所做的工作相对简单，所以这个方法很好。我还可以在Photoshop中尽可能减少文件大小。但是，是的，将来对于更大的项目，我将不得不使用Ajax或类似的工具来避免加载时间