I have the following code in one of my projects. It displays the menu items. What I wanted is that, when someone clicks a link found at the particular list item, the background color of that particular list item should change. 

Here I used grey for demo. 

When the user clicks another list item, the previously clicked list item should go back to the original color, and the current list item should change into grey color. In addition to this, I wanted the text to change to white color for the currently selected list item. 

I tried changing the style for `a:visited`, but it didn't work. 

Any help would be greatly appreciated.

```js
$('a').click(function(){
   $(this).addClass("visited");
});

```

```css
ul {
      list-style-type: none;
}

.box li a {
      font-size: 18px;
      text-decoration: none;
      color: black;
      padding-left: 15px;
      display: block;
      height: 60px;
      line-height: 60px;
}

.box li.active {
      background-color: #ad2a2a;
      font-weight: bold;
      color: white;

}

.box li:hover {
      background-color: rgba(198, 19, 52, 0.4);
}

.box li {
      background-color: #e3e2e2;
      margin-bottom: 1px;
      position: relative;
      transition: .2s;
      margin-right: 10px;

}

a.visited {
      color: #ffffff;
}

```

```html

    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>

    <ul class="box">
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 1</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 2</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 3</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 4</a></li>
    <li onclick="this.style.backgroundColor = 'grey';"><a href="#">Menu Item 5</a></li>
    </ul>

```