javascript - 单击图像到 div 时如何显示文本

Question

我想发布一张 2 个 DIV 的图像，用黑线分隔，左边的有 4 个图像，我想要的是:

当我单击任何按钮时，它会在右侧 DIV 中显示文本，当我按另一个图像时，它也会显示另一个文本。我不知道该怎么做，这就是我来这里寻求帮助的原因。

如果您对这个主题有任何想法，比如我必须使用什么，或者您可以找到的资源，因为我没有找到任何相关的内容。

我在 JavaScript 中搜索过这个内容，显示了按钮中的文本，但没有任何帮助。

为了让您更好地理解，我将向您展示最终结果如何，它应该是什么样子。 http://prntscr.com/7krf5h

当然，如果没有箭头指向，并且右侧div中的图像，它会消失，我只需要文本并显示文本，但我认为你理解内容。

Answer 1

您似乎正在尝试设置某种幻灯片。一种方法是创建两个列表，一个隐藏的列表用于幻灯片数据，另一个可见的列表用于左侧的幻灯片列表。然后，您可以根据索引从隐藏列表中获取必要的数据。这是一个 fiddle 示例，它将突出显示我的意思:http://jsfiddle.net/ethueuhj/1/ (在 fiddle 中，您可以将 data-bg 属性更改为计算机背景、平板电脑背景等)。

$(function() {
    function setSlide(index) {
        var slide = $('.slide-data li').eq(index);
        $('.slide-container').css({ "background-image": "url('" + slide.data('bg') + "')" });
        $('.slide-container').html(slide.html());
    }

    $('.slides li').click(function() {
        setSlide($(this).index());
    });

    // Default slide
    setSlide(0);
});