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

Question

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:

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.

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.

For your better understanding i will show you how is the final result, how it should look. 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.

Answer 1

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

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.

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

Answer 2

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).

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