引导响应式图标和图像答案

【问题标题】：bootstrap responsive icons and images引导响应式图标和图像
【发布时间】：2019-08-10 07:13:51
【问题描述】：

问题是我需要在正确的链接上制作这些图标，这些图标指向将在点击时出现的照片。如果我点击第一个，它会显示草莓，第二个会显示其他水果等等。同时它需要在左边写上那个水果的名字，就像在这种情况下Strawberry，等等。

HTML：

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-4 text-center">
            <h2>Nasi Proizvodi</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ullam temporibus ex et
                consequatur eligendi error, voluptatibus quaerat? Quam qui nesciunt doloribus adipisci placeat nam
                incidunt cupiditate repellat! Animi, blanditiis.</p>
        </div>
        <div class="col-xl-6">
            <img src=" np-assets/images/tekstura.png" class="hero-image ml-auto">
            <ul class="nav links_up justify-content-center">
                <li class="nav-item slika1">
                    <a class="nav-link active" href="#"><img src="np-assets/images/jagodica.png"></a>
                </li>
                <li class="nav-item slika2">
                    <a class="nav-link active" href="#"><img src="np-assets/images/sljiva.png"></a>
                </li>
                <li class="nav-item slika3">
                    <a class="nav-link active" href="#"><img src="np-assets/images/tresnja.png"></a>
                </li>
                <li class="nav-item slika4">
                    <a class="nav-link active" href="#"><img src="np-assets/images/malina.png"></a>
                </li>
                <li class="nav-item slika4">
                    <a class="nav-link active" href="#"><img src="np-assets/images/kupina.png"></a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS：

.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;
            }
        }
    }
}

【问题讨论】：

点击绿色悬停图标时需要显示一张图片

标签： html sass bootstrap-4

【解决方案1】：

有很多方法可以做到这一点，一种允许它增长的简单方法是使用数据属性。

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

然后使用 jQuery：

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

【讨论】：