我想在 li 处于活动状态时更改图像

Question

如何在li 处于活动状态时更改菜单背景图像，我正在尝试设计当我将鼠标悬停在li 和li 处于活动状态时背景会改变，悬停效果有效但我不明白li 激活时如何更改菜单背景图片

$(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"><a href="" class="navItem">Home</a></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"><a href="" class="navItem">Works</a></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"><a href="" class="navItem">About</a></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"><a href="" class="navItem">Contact</a></li>
            </ul></div> </div>

Answer 1

我相信li 元素没有“活动”状态，虽然a 元素确实有活动状态（当您按住鼠标时），但这可能不是您需要的。如果您想在点击时更改图像，请使用.click() 而不是.mouseover()。由于用户应该看到动画，因此您可能应该使用 .preventDefault() 方法阻止锚点的默认行为。

我没有修改html和css，只修复了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"><a href="" class="navItem">Home</a></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"><a href="" class="navItem">Works</a></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"><a href="" class="navItem">About</a></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"><a href="" class="navItem">Contact</a></li>
            </ul></div> </div>