Html 引导响应图标和图像

问题是，我需要使这些图标的权利链接的照片，将出现在点击。如果我单击第一个，它将显示草莓，在第二个上显示一些其他水果等，同时它需要在左侧写下水果的名称，如本例中的

草莓

，等等

HTML:

---

有很多方法可以实现这一点，一种允许it增长的简单方法是使用数据属性

<a data-image="photo-strawberries.png" data-title="Strawberries" class="nav-link active" href="#"><img src="np-assets/images/jagodica.png"></a>

---

它需要在单击绿色悬停图标时显示一张图片

.links_up {
    margin-top: -27%;
    color: #ffffff;
    position: relative;
    size: 1vw;

    .slika1 {
        width: 85px;
        height: 85px;
        padding: 0px;

        img {
            margin: 0px;
            padding: 0px 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika2 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika3 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika4 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika5 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }
}

<a data-image="photo-strawberries.png" data-title="Strawberries" class="nav-link active" href="#"><img src="np-assets/images/jagodica.png"></a>

$(document).ready(function(){
     $(".nav-link").on("click",function(){
         $("h2").html($(this).data("title"));
         $(".hero-image").attr("src",$(this).data("image"));
         return false;
      });
});