How to make menu buttons active when clicked?

Question

css

Help guys, I've searched all over Google and found nothing.
Here is the menu

<div class="menu">
                        <ul>
                            <li><a href="index.php">Главная</a></li>
                            <li><a href="order.php">Заказ</a></li>
                            <li><a href="payment.php">Оплата</a></li>
                            <li><a href="conditions.php">Условия</a></li>
                            <li><a href="contacs.php">Контакты</a></li>
                        </ul>
                    </div>

How can I make it active when the button is clicked? Let's say that in the toaster, you press my ribbon, it becomes a little darker, if you select another item, it will become active, and it will return its color.
Thanks: 3

Answer 1

On the client side - hang on the element on which the class was clicked (active, open - no difference). Well, do not forget to prescribe the styles for this class in the css file before that. This option will work with ajax content loading.
With the standard version, as mentioned above, you check the compliance of the url and the link, and then by analogy.

<div class="menu">
       <ul>
             <li><a class="js-menu-link active" href="index.php">Главная</a></li>
             <li><a class="js-menu-link" href="order.php">Заказ</a></li>
             <li><a  class="js-menu-link" href="payment.php">Оплата</a></li>
             <li><a  class="js-menu-link" href="conditions.php">Условия</a></li>
             <li><a  class="js-menu-link" href="contacs.php">Контакты</a></li>
       </ul>
</div>

$('.menu').find('.js-menu-link').on('click', function () {
     if ($(this).hasClass('active')) {
         return;
     }
     $('.menu').find('.js-menu-link active').removeClass('active');
     $(this).addClass('active');
});

JS option:

var menuItems = document.getElementsByClassName('js-menu-link');
var onClick = function (event) {
  event.preventDefault();
  
  for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].classList.remove('active');
  }
  
  event.currentTarget.classList.add('active');
};

for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', onClick, false);
}