Как сделать кнопки меню активными при нажатии?

Question

[batraider]

Помогите ребят, облазил весь гугл ничего не нашел.
Вот меню

<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>

Как сделать, что бы при нажатии на кнопку она становилась активной. Допустим вот в тостере, нажимаешь моя лента, она становиться немного темнее, если выберешь другой пункт, он станет активным, а тот вернет свой цвет.
Спасибо :3

Answer 1

[Maxim Nepritimov]

На стороне клиента - вешать на элемент, по которому кликнули класс (active, open - без разницы). Ну и не забыть перед этим в css-файле прописать стили для этого класса. Такой вариант прокатит при ajax-подгрузке контента.
При стандартном варианте, как сказали выше -проверяешь соответствие url и ссылки и далее по аналогии.

<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:

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);
}

Comments

[napz]

это не совсем js, а jquery. как сделать то же, но на чистом js?

[Maxim Nepritimov]

napz: легко и просто https://jsfiddle.net/v9rxtnp8/

[napz]

Maxim Nepritimov: вот это я понимаю, спасибо!