我有一個小畫廊的代碼。當鼠標放在圖像上時，會出現一個帶有縮略圖的菜單。當鼠標經過縮略圖之一時，相應的圖像將在主div中可見，但是一旦鼠標離開縮略圖，圖像將被隱藏。

我在尋找的是，當點擊縮略圖相應的圖像是可見的。為此，創建一個活動類。我想知道如何將它添加到我的jquery代碼中。

// Mouse Enter
const cat = $(".thumbnails img")
cat.on('mouseenter', function() {
  const indexcat = cat.index(this)
  $(".images img.show").removeClass("show");
  $(".images img").eq(indexcat).addClass("show");
});

// Mouse Leave
cat.on('mouseleave', function() {
  const indexcat = cat.index(this)
  $(".images img.show").addClass("show");
  $(".images img").eq(indexcat).removeClass("show");
});

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.display {
  display: flex;
  width: 740px;
  height: 404px;
  background: silver;
  position: relative;
}
.images img {
  position: absolute;
  opacity: 0;
  transition: all 300ms linear;
}
.images img.show,
.images img.active { 
  opacity: 1;
  transition: .5s linear;
}
.thumbnails {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  padding: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.thumbnails img {
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid;
  border-color: transparent;
  transition: opacity .5s ease;
  opacity: .55;
}
.thumbnails img:hover {
  border-color: red;
  opacity: 1;
  cursor: pointer;
}
.display:hover .thumbnails {
  opacity: 1;
}
body {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  background: #000116;
}
img {
  width: 100%;
  height: 100%;
}

<div class="display">
  <div class="images">
    <img class="active" src="https://i.imgur.com/Gnn5LiQ.jpeg" alt="">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt="">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt="">
  </div>
  <div class="thumbnails">
                  <img src="https://i.imgur.com/Gnn5LiQ.jpegg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="" style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt=""  style="width: 100px; height: auto;">
</div>
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

你可以這樣做

將單擊事件與縮略圖圖像綁定，在事件處理函數中，移除活動類，然后在單擊的圖像上添加活動類。 為具有& quot顯示& quot班級。因此，它將顯示在活動圖像的上方。比如:給z-index: 1。 最后，用類& quot縮略圖& quot這樣它總是在活動和顯示圖像的上方。比如:給z-index: 2。 以下是更新后的代碼:-

// Mouse Enter
const cat = $(".thumbnails img")
cat.on('mouseenter', function() {
  const indexcat = cat.index(this)
  $(".images img.show").removeClass("show");
  $(".images img").eq(indexcat).addClass("show");
});

// Mouse Leave
cat.on('mouseleave', function() {
  const indexcat = cat.index(this)
  $(".images img").eq(indexcat).removeClass("show");
  $(".images img.show").addClass("show");
});

// Click
cat.on('click', function() {
  const indexcat = cat.index(this);
  // Remove the active img
  $(".images img.active").removeClass("active");
  $(".images img").eq(indexcat).addClass("active");
});

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.display {
  display: flex;
  width: 740px;
  height: 404px;
  background: silver;
  position: relative;
}
.images img {
  position: absolute;
  opacity: 0;
  transition: all 300ms linear;
}
.images img.show,
.images img.active { 
  opacity: 1;
  transition: .5s linear;
}

.images img.show{
   z-index: 1;
}

.thumbnails {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  padding: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.thumbnails img {
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid;
  border-color: transparent;
  transition: opacity .5s ease;
  opacity: .55;
}
.thumbnails img:hover {
  border-color: red;
  opacity: 1;
  cursor: pointer;
}
.display:hover .thumbnails {
  opacity: 1;
  z-index: 2;
}
body {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  background: #000116;
}
img {
  width: 100%;
  height: 100%;
}

<div class="display">
  <div class="images">
    <img class="active" src="https://i.imgur.com/Gnn5LiQ.jpeg" alt="">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt="">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt="">
  </div>
  <div class="thumbnails">
                  <img src="https://i.imgur.com/Gnn5LiQ.jpegg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="" style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt=""  style="width: 100px; height: auto;">
</div>
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>