I want to change image when li is active - html

Question

How to change the menu background image when li is active, I am trying to design when I hover on li and li is active background will be change, hover effect is working but I don't understand how to change menu background image when li is active
$(function () {
var image = $('.menu').find('img').attr('src');
var lastImage;
$('.menu ul li.navLink').mouseover(function () {
var currentImage = $(this).attr('data-img');
$('.navigationGif img').attr('src', currentImage);
if(lastImage !== currentImage) {
$('.navigationGif').removeClass('animation');
setTimeout(() => {
$('.navigationGif').addClass('animation')
}, 10);
lastImage = currentImage
} })});
body {font-family:'Aktiv Grotesk', serif;}
#toggle { position: fixed; right: 5%; width: 50px; height: 50px; margin-top: 20px; z-index: 99; }
#toggle div { height: 4px; margin: 8px auto; border-radius: 5px; transition: all 0.3s; backface-visibility: hidden; background: #ed8d8d; }
.menu { text-align: center; margin: auto; height: 100%; padding-top: 2%; padding-bottom: 10%; z-index: 1; }
.menu li{ display: block; font-size: 1.5rem; font-family: "Raleway SemiBold", Serif, sans-serif; padding-bottom: 20px; }
.menu li+li{ margin-top: 30px; }
.navLink.active a{ color: #ed8d8d; }
.menu a{ color: black; font-size: 3.5rem; }
.navLink:hover .navItem{ color: whitesmoke; }
.navigationGif{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
.navigationGif.animation { animation: menuBG 0.7s ease-in;}
.menu img{ width: 100%; z-index: -99; }
#keyframes menuBG { 0%{ transform: scale(1.07); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif"> <div class=""> <img src="" alt="" class="src"> </div></div>
<div class="data"><ul>
<li data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink home active">Home</li>
<li data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink works">Works</li>
<li data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80" class="navLink about">About</li>
<li data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80"class="navLink contact">Contact</li>
</ul></div> </div>

Answer 1

I believe there's no "active" state for li elements, and though a elements do have active state (while you're holding mouse down), that's probably not what you need. If you want to change image on click, use .click() instead of .mouseover(). Since user should see the animation, you should probably prevent default behavior of the anchor using .preventDefault() method.
I left html and css untouched and have only fixed js:
$(function() {
var image = $('.menu img').attr('src');
var lastImage;
$('.menu ul li.navLink').click(function(e) {
e.preventDefault();
var currentImage = $(this).attr('data-img');
$('.navigationGif img').attr('src', currentImage);
if (lastImage !== currentImage) {
$('.navigationGif').removeClass('animation');
setTimeout(() => {
$('.navigationGif').addClass('animation')
}, 10);
lastImage = currentImage
}
})
});
body {font-family:'Aktiv Grotesk', serif;}
#toggle { position: fixed; right: 5%; width: 50px; height: 50px; margin-top: 20px; z-index: 99; }
#toggle div { height: 4px; margin: 8px auto; border-radius: 5px; transition: all 0.3s; backface-visibility: hidden; background: #ed8d8d; }
.menu { text-align: center; margin: auto; height: 100%; padding-top: 2%; padding-bottom: 10%; z-index: 1; }
.menu li{ display: block; font-size: 1.5rem; font-family: "Raleway SemiBold", Serif, sans-serif; padding-bottom: 20px; }
.menu li+li{ margin-top: 30px; }
.navLink.active a{ color: #ed8d8d; }
.menu a{ color: black; font-size: 3.5rem; }
.navLink:hover .navItem{ color: whitesmoke; }
.navigationGif{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
.navigationGif.animation { animation: menuBG 0.7s ease-in;}
.menu img{ width: 100%; z-index: -99; }
#keyframes menuBG { 0%{ transform: scale(1.07); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif"> <div class=""> <img src="" alt="" class="src"> </div></div>
<div class="data"><ul>
<li data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink home active">Home</li>
<li data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink works">Works</li>
<li data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80" class="navLink about">About</li>
<li data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80"class="navLink contact">Contact</li>
</ul></div> </div>