Question

当用户点击轮播中的一个图像时，应显示position: absolute; div。 div包含两个不同的图像和一个基于最初点击的图片的表单，并有一个提交按钮。 如何制作显示/隐藏，为每张图片显示不同的内容？

这里是其中一个轮播的代码（网站上有4个，脚本应该与所有四个一起使用）。

<div id="slider1">
    <a class="buttons prev" href="#">&#60;</a>
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-01.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-02.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-03.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-04.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-05.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-06.jpg" /></li>
        </ul>
    </div>
    <a class="buttons next" href="#">&#62;</a>
</div>

我脑海中唯一的解决方案是创建30个（图像数量）显示/隐藏div ...我想这么干。

Answer 1

您还可以将data-something属性添加到轮播图像，并通过AJAX从局部视图加载内容。

但是这样你就需要根据data-something（可能是Id）在部分和显示/隐藏内容中添加条件。

显示/隐藏具有不同内容的div

1 个答案: