Question

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

当我点击任何一个按钮时，它会在右侧DIV中显示一个文本，当我按下另一个图像时，它也会显示另一个文本。我不知道我怎么能这样做，这就是为什么我在这里寻求帮助。

如果您对该主题有任何想法，例如我必须使用的内容，或您可以找到的来源，因为我没有发现任何相关内容。

我在JavaScript中搜索了这个，从按钮中显示了一个文本，但没有什么可以帮助我。

为了更好地理解，我会告诉你最终结果如何，它应该如何。 http://prntscr.com/7krf5h

当然没有箭头指向，右边div中的图像，它将消失，我只需要文本并显示文本，但我想你理解内容。

Answer 1

你需要使用jquery才能达到你想要的效果。

此外，当您单击另一个div标签时，您需要更改div的文本。为此，您需要使用内部html。

以下是示例代码，您可以尝试一下。

$(document).ready(function(){
$("name_of_image_div_tag_here").click(function(){
    alert("The image was clicked.");
    document.getElementById("name_of_text_div_tag_here").innerHTML = "Sample text to display";
    });
});

Answer 2

看起来您正在尝试设置某种幻灯片。您可以这样做的一种方法是创建两个列表，一个用于幻灯片数据的隐藏列表，另一个用于左侧幻灯片列表的可见列表。然后，您可以根据索引从隐藏列表中获取必要的数据。这是一个示例小提琴，它将突出我的意思：{{3}}（在小提琴中，您可以将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);
});

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

2 个答案: