单击其中一个图像时滑动文本
单击其中一个图像时滑动文本
提问于 2018-07-14 03:27:57
我正在尝试使用jquery来实现这一点，所以当您悬停或单击其中一个图像(红框)时，灰色区域(文本区)会发生变化，以显示与该图像相关的文本。添加类来执行显示块不起作用，因为我不知道如何将特定的图像链接到特定的文本区域。
我试图通过切换非活动类和活动类来实现这一点，但我仍然不知道如何将图像链接到特定的文本区域。这是它看起来是什么样子的草图。
因为它们位于两个不同的网格中，因为在较小的屏幕上只显示第一个网格。
<div class="container">
<div class="row py-5">
<div class="grid-reviews">
<img class="photothumb review-1" src="img/reviews/person1.jpg">
<img class="photothumb review-2" src="img/reviews/person2.jpg">
<img class="photothumb review-3" src="img/reviews/person3.jpg">
<img class="photothumb review-4" src="img/reviews/person4.jpg">
<img class="photothumb review-5" src="img/reviews/person5.jpg">
<img class="photothumb review-6" src="img/reviews/person6.jpg">
</div>
<div class="grid-reviews-2">
<img class="photothumb review-7" src="img/reviews/person7.jpg">
<img class="photothumb review-8" src="img/reviews/person8.jpg">
<img class="photothumb review-9" src="img/reviews/person9.jpg">
<img class="photothumb review-10" src="img/reviews/person10.jpg">
<img class="photothumb review-11" src="img/reviews/person11.jpg">
<img class="photothumb review-12" src="img/reviews/person12.jpg">
</div>
</div>
<div class="testimony-desc text-center">
<div class="review-1 not-active">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab deleniti, deserunt dolorum et eum iure labore libero molestiae nam nisi nostrum obcaecati perferendis rem sed tempora vel velit veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, cupiditate deleniti dolore et sit veniam! Beatae explicabo iure natus veritatis? Aliquam fugiat modi molestias nisi repellendus rerum sunt tenetur veniam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aspernatur debitis deleniti hic illo iure pariatur provident, quibusdam rem reprehenderit sit, vel. Eum nesciunt quaerat, ratione sed similique voluptas.</p>
</div>
<div class="review-2 not-active">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur eius eos inventore iusto laborum nostrum similique tempore veniam? Ipsa ipsum libero minima nostrum reiciendis. Ipsum iure laudantium nobis odit veritatis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nihil obcaecati voluptatem. Aliquid, blanditiis dolorem et harum ipsam magnam, nemo nesciunt obcaecati pariatur quaerat quisquam similique tempore velit! Numquam, perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi et hic illo in necessitatibus officia pariatur porro repellat! Ab alias amet dolor doloremque inventore, placeat qui quo rerum tempore.</p>
</div>
<div class="review-3 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-4 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-5 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-6 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-7 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-8 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-9 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-10 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-11 not-active">
<p></p>
<p></p>
<p></p>
</div>
<div class="review-12 not-active">
<p></p>
<p></p>
<p></p>
</di
回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51331689
复制相关文章
相似问题
腾讯云开发者
