How to deselect a highlighted list item with CSS/Javascript?

Question

I have a list of images plus keyword which stands for a list of selections a user can click on, in order to limit the choice of another list, based on the selection. The image keeps being highlighted via CSS shadow while the user selects from the other list. However, due to some other interactiviy, I would like to deactivate that highlighted image later, that is, deselecting the shadow of that image.

How would that work? Haven't found a proper, easy solution for this. Some "document.getElementById('li1').Selected = false" for example, meaning that I would need to add an ID to each element.

  .explore { margin-left: auto; margin-right: auto; width: 1020px; margin-top: 20px; } .explore_body { width: 100%; /* border: 1px solid #f00; */ padding-bottom: 5px; padding-top: 5px; clear: both; background: #f0f0f0; *background: #f0f0f0; /* star hack to target IE6 & 7*/ } .explore_body ul { margin: 5px; padding-top: 5px; clear: both; width: 100%; } .explore_body ul li { display: inline-block; /*IE7 doesn't support inline-block */ zoom: 1; *display: inline; /* star hack to target IE6 & 7*/ /* background: url(images/album.png); */ width: 130px; height: 145px; margin: 5px 5px; } .explore_body ul li img { width: 120px; height: 100px; margin: 5px 0px 5px 5px; } .explore_body ul li { opacity: 0.9; filter:alpha(opacity=90); /* For IE8 and earlier */ } .explore_body ul li:hover { opacity: 1; filter:alpha(opacity=100); /* For IE8 and earlier */ -webkit-box-shadow: 3px 3px 3px 3px #666; } .explore_body ul li:selected { opacity: 1; filter:alpha(opacity=100); /* For IE8 and earlier */ -webkit-box-shadow: 3px 3px 3px 3px #666; } .active { opacity: 1; filter:alpha(opacity=100); /* For IE8 and earlier */ -webkit-box-shadow: 3px 3px 3px 3px #666; } .active2 { background-color: #cedff8; } 

  <div class="explore" id="explore"> <div class="explore_body"> <h4 style="text-align: center; margin-bottom: -10px; ">explore by theme:</h4> <ul id="nav"> <li><a href="#!" onclick="xxx"><img src="images/air_pollution.png" /></a><a href="#!" class="album_title">Air pollution and air quality</a></li> <li><a href="#!" onclick="xxx"><img src="images/biodiversity.png"/></a><a href="#!" class="album_title">Biodiversity</a></li> <li><a href="#!" onclick="xxx"><img src="images/chemicals_and_wastes.png"/></a><a href="#!" class="album_title">Chemicals and waste</a></li> </ul> </div> </div> 

Thanks for any hints!

Answer 1

you need to create class that defines style for selected item, lets call it .active . for example if you want to add shadow only to selected item you should define it in .active . then in js on click event first remove that class from all items and then add it only to selected item.

every time you select item you will remove .active from previous item and add it only to newly selected item.

Answer 2

Remove the onclick="xxx" from your code and add onclick="selectMe(this)" on every "li" like this:

<div class="explore" id="explore">
  <div class="explore_body">
    <h4 style="text-align: center; margin-bottom: -10px; ">explore by theme:</h4>
    <ul id="nav">
      <li onclick="selectMe(this)"><a href="#!"><img src="images/air_pollution.png" /></a><a href="#!" class="album_title">Air pollution and air quality</a></li>
      <li onclick="selectMe(this)"><a href="#!"><img src="images/biodiversity.png"/></a><a href="#!" class="album_title">Biodiversity</a></li>
      <li onclick="selectMe(this)"><a href="#!"><img src="images/chemicals_and_wastes.png"/></a><a href="#!" class="album_title">Chemicals and waste</a></li>
    </ul>
  </div>
</div>

Then in your JavaScript you will add the selectMe() method that first deselects all "LI" elements in UL with ID="nav" and then selects the one LI that was clicked upon:

function selectMe(el) {
  var lis = document.getElementById("nav").getElementsByTagName("li");
  for (i = 0; i < lis.length; i++) {
    lis[i].classList.remove('active')
  }
  el.classList.add('active');
}

Here is a working example