單擊圖像到div時如何顯示文本

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

您似乎正在嘗試設置某種幻燈片放映。 一種方法是創建兩個列表，一個隱藏的列表用於幻燈片數據，另一個可見的列表用於左側的幻燈片列表。 然后，您可以根據索引從隱藏列表中獲取必要的數據。 這是一個示例小提琴，它將突出我的意思： 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);
});