Jquery Перейти к первой вкладке при нажатии изображения

Question

У меня маленькое изображение. Когда пользователь нажимает на это изображение, оно прокручивается вниз для расширенного просмотра. развернутое изображение находится внутри вкладок (первая вкладка).

Я хочу изменить вкладки, когда пользователь нажимает на маленькое изображение, если пользователь не находится на первой вкладке , как показано на изображении

Мне как-то удалось добраться до того момента, когда, когда пользователь нажимает на маленькое изображение, оно приводит его к увеличенному изображению. используя следующий код -tabs-

    <div class="container prod-tab">
        <div class="row prod-des-row">
            <div class="col-12 ">
                <nav>
                    <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                        <a name="top"></a><a class="col-4 nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Layers</a>
                        <a class="col-4 nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Description</a>
                        <a class="col-4 nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Features</a>

                    </div>
                </nav>
                <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <img class="img-fluid" src="~/Images/products/LSerene.png" />
                    </div>
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

                    </div>
                    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                        <ul>
                            <b>Features & Benefits</b>

                        </ul>
                    </div>

                </div>

            </div>
        </div>
    </div>

-малое изображение-

<div class="col-6 layerr">
                    <a href="#top"><img class="img-fluid layer-img" src="~/Images/products/LSerene.png" /></a>
                </div>

в расширенном виде-

<a name="top">

Я пробовал этокод, но он не показывает изображение

$("#topp").click(function () {

    $(".nav-link").removeClass("active");
    $("#nav-home-tab").addClass("active");
    $(".tab-pane").removeClass("active");
    $("#nav-home").addClass("active");

});

Однако, скажем, если пользователь находится на третьей вкладке и нажмите на маленькое изображение. он прокручивается вниз и показывает третью вкладку. Все, что я хочу сделать, это изменить вкладку на первую вкладку при каждом нажатии на маленькое изображение