Change image and add class for active menu/button

Question

I am currently creating buttons that can change the image when mouse hover and click on it. The active button should add active class and it will remove when other button is clicked.

I've tried but it seem does not work.

 jQuery(document).ready(function($) { $('.button-one').on('click mouseover', function() { $('#change-image').attr('src', '/image-1.png'); $('.button-one').removeClass('btn-active'); $(this).addClass('btn-active'); }); $('.button-two').on('click mouseover', function() { $('#change-image').attr('src', '/image-2.png'); $('.button-one').removeClass('btn-active'); $(this).addClass('btn-active'); }); $('.button-three').on('click mouseover', function() { $('#change-image').attr('src', '/image-3.png'); $('.button-one').removeClass('btn-active'); $(this).addClass('btn-active'); }); });

 .button-container ul { display: flex; }.btn li a { padding: 9px 18px; margin-right: 1em; background: #8a8c8e; color: #ffffff; font-weight: bold; font-size: 18px; border: none; display: block; }.btn li a:hover { background: #ee2e24; color: #ffffff; display: block; }.btn li a.btn-active { background: #ee2e24; color: #ffffff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-container"><img id="change-image" src="/image-1.png" alt="Image 1" /></div> <div class="button-container"> <ul class="btn"> <li><a class="button-one">Image 1</a></li> <li><a class="button-two">Image 2</a></li> <li><a class="button-three">Image 3</a></li> </ul> </div>

Answer 1

I tried doing this in plain JavaScript. I added onclick events on each button that passes the class name as a parameter which is compared to apply the "btn-active" class.

 const makeActive = (btnClass) => { let btns = []; btns[0] = document.querySelector(".button-one"); btns[1] = document.querySelector(".button-two"); btns[2] = document.querySelector(".button-three"); for(let i=0; i<btns.length; i++){ if(btns[i].classList.contains(btnClass)){ btns[i].classList.add('btn-active'); }else{ btns[i].classList.remove('btn-active'); } } }

 .button-container ul { display: flex; }.btn li a { padding: 9px 18px; margin-right: 1em; background: #8a8c8e; color: #ffffff; font-weight: bold; font-size: 18px; border: none; display: block; }.btn li a:hover { background: #ee2e24; color: #ffffff; display: block; }.btn li a.btn-active { background: #ee2e24; color: #ffffff; }

 <div class="button-container"> <ul class="btn"> <li><a class="button-one" onclick="makeActive(this.getAttribute('class'))">Image 1</a></li> <li><a class="button-two" onclick="makeActive(this.getAttribute('class'))">Image 2</a></li> <li><a class="button-three" onclick="makeActive(this.getAttribute('class'))">Image 3</a></li> </ul> </div>

Answer 2

The issue is because you don't remove the btn-active class from all the elements in each repeated hover / click function.

To fix this, and improve the code, you can use a common class on the button elements to group them by behaviour. Then you can use a single event handler to update the img src based on the element which raised the event. To store the image path you can use a data attribute on the buttons to store the image path metadata.

Using this pattern will mean that the JS will work for an infinite number of buttons without the need to create N number of new JS functions or event handlers.

 jQuery($ => { $('.button').on('click mouseover', e => { let $btn = $(e.target); $('#change-image').attr('src', $btn.data('imgsrc')); $('.button').removeClass('btn-active'); $btn.addClass('btn-active'); }); });

 .button-container ul { display: flex; }.btn li a { padding: 9px 18px; margin-right: 1em; background: #8a8c8e; color: #ffffff; font-weight: bold; font-size: 18px; border: none; display: block; }.btn li a:hover { background: #ee2e24; color: #ffffff; display: block; }.btn li a.btn-active { background: #ee2e24; color: #ffffff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-container"><img id="change-image" src="https://via.placeholder.com/100x100.png?text=Image 1" alt="Image" /></div> <div class="button-container"> <ul class="btn"> <li><a class="button btn-active" data-imgsrc="https://via.placeholder.com/100x100.png?text=Image 1">Image 1</a></li> <li><a class="button" data-imgsrc="https://via.placeholder.com/100x100.png?text=Image 2">Image 2</a></li> <li><a class="button" data-imgsrc="https://via.placeholder.com/100x100.png?text=Image 3">Image 3</a></li> </ul> </div>