'Active image tab image gallary

I have a tab gallery (from W3Schools) where you can choose an image to show under. I was wondering how to have an active class for the chosen image after I choose. Like when you see it on navbar (this example shows that pages is open). (Home pages about contact) I just need to give the clicked image any class(opacity or color) I tried many things but still new with JavaScript and couldn't achieve what I want:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/222" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/201" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/209" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

javascript css

Solution 1:^[1]

You can do this using an event listener that adds whatever classes you need and remove them. You can use event.target to access the element which triggered the listener and add/remove classes accordingly:

// get the images that we want to listen for clicks from
let img = document.querySelectorAll(".column img");

// add an event listener to each image
img.forEach(function(elem) {
  // when one of the images is clicked, add the "your-class" class to it and remove the class from any other elements
  elem.addEventListener("click", function(event) {
    // check if any other elements have the class and remove it if some do
    if (document.querySelectorAll(".your-class").length != 0) {
      document.querySelector(".your-class").classList.remove("your-class");
      // if there are no other elements with "your-class" do nothing
    } else {}
    // add "your-class" to the element clicked
    event.target.classList.add("your-class")
  });
});

In the code snippet below, I have demonstrated this by having a class that makes the active image border cyan when it is clicked:

// get the images that we want to listen for clicks from
let img = document.querySelectorAll(".column img");

// add an event listener to each image
img.forEach(function(elem) {
  // when one of the images is clicked, add the border-cyan class to it and remove the class from any other elements
  elem.addEventListener("click", function(event) {
    // check if any other elements have the class and remove it if some do
    if (document.querySelectorAll(".border-cyan").length != 0) {
      document.querySelector(".border-cyan").classList.remove("border-cyan");
      // if there are no other elements with the border cyan class do nothing
    } else {}
    // add the border cyan class to the element clicked
    event.target.classList.add("border-cyan")
  });
});

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}


/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.border-cyan {
  border: 3px solid cyan;
}

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/222" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/201" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/209" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

Solution 2:^[2]

at first you need to find all images and remove class from them
after that add class for clicked image

function myFunction(img) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = img.src;
  imgText.innerHTML = img.alt;
  expandImg.parentElement.style.display = "block";
  img.closest('.row').querySelectorAll('img').forEach(img => img.classList.remove('yourClassName'))
  img.classList.add('yourClassName')
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.yourClassName {
border: 1px solid red;
}

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/222" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/201" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/209" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Franc Kafka

'Active image tab image gallary

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]