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

I want to post an image of 2 DIVs, separated by a black line , the one on the left have 4 images and what I want is:

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

When I click on any of the buttons it will reveal a text in the right DIV and when I press another image it reveals, too, another text. I have no idea how I can do that, that's why I'm here asking for help.

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

If you have any ideas about the subject, like what I must use, or sources that you can find because I didn't find anything related.

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

I've searched about this in JavaScript revealing a text from a button, but nothing that could help me.

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

For your better understanding i will show you how is the final result, how it should look. http://prntscr.com/7krf5h

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

Of course without the arrows pointing, and the image in the right div, it will disappear, i just need the text and show the text, but i think u understand the content.

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

2 个解决方案

#1

It looks like you're trying to setup a slideshow of some sort. One way you can do it is to create two lists, a hidden one for the slide data and another visible one for the list of slides on the left-hand side. Then, you can grab the necessary data from the hidden list based on index. Here's an example fiddle that will highlight what I mean: http://jsfiddle.net/ethueuhj/1/ (in the fiddle, you can change the data-bg attribute to a computer background, tablet background, et al).

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

#2

You need to use jquery in order to achieve what you want.

你需要使用jquery来实现你想要的。

Also, you need to change the text of the div when you click on another div tag. For this, you need to user inner html.

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

Here is the sample code, you can try it.

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

$(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";
    });
});

#1

$(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);
});

#2