Active image tab image gallary

Question

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


  Tabbed Image Gallery
  Click on the images below:




  
    
  
  
    
  
  
    
  
  
    
  



  ×

unrealapex · Accepted Answer

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 changes the border of the active image to the color 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;
}


  Tabbed Image Gallery
  Click on the images below:




  
    
  
  
    
  
  
    
  
  
    
  



  ×

Active image tab image gallary

Answers (2)

Related Questions