Question

问题是我需要在链接上创建这些图标，这些链接会在单击时出现。如果我单击第一个，它将显示草莓，第二个显示其他水果，等等。同时，它需要在左侧写上该水果的名称，例如在这种情况下new Error().stack，依此类推

HTML：

Strawberry

CSS：

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

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

引导响应图标和图像

1 个答案: