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!

Where is the javascript that selects on click. what will cause to deselect? a certain time has passed? deselect one or all? — Nawed Khan, Dec 12 '18 at 18:00
@NawedKhan: I'd say there is no javascript to select it. One clicks on the image, and it's being highlighted via the ":active" CSS tag. To deactivate it, it would be when clicking on another link, which does something else and would at the same time deactivate that image. — luftikus143, Dec 12 '18 at 18:20
Unless I misunderstand your requirement this should give you some hints: https://stackoverflow.com/a/29895300/125981 — Mark Schultheiss, Dec 12 '18 at 18:30

score 0 · Answer 1 · answered Dec 12 '18 at 18:14

0

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.

answered Dec 12 '18 at 18:14

Nemanja Blagojevic

57
5

But how to remove ».active« via a javascript command? What is the javascript code to do that »manually«? – luftikus143 Dec 12 '18 at 18:22
Here is example on how to remove class `function myFunction() { var element = document.getElementById("myDIV"); element.classList.remove("mystyle"); }` – Nemanja Blagojevic Dec 13 '18 at 19:05

score 0 · Accepted Answer · answered Dec 12 '18 at 18:58

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

The challenge is how to deselect the active one by clicking somewhere else on a link. I updated the fiddle to reflect this and added a »deselectMe« function. That would be the goal: http://jsfiddle.net/luftikus143/8aLbwe61/1/ — luftikus143, Dec 13 '18 at 07:02
why is it a challenge? your fiddle has a minor error, missing equal sign in onclick in second button. Once fixed, the second button works fine. you can call this deselectMe() function from parent div, even body. — Nawed Khan, Dec 13 '18 at 07:26
Ha, yes, thanks for watching that missing equal sign! Thanks so much for the help! — luftikus143, Dec 13 '18 at 07:56

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

2 Answers2