Подсветка текущего пункта меню

217

21 апреля 2018, 15:58

Задача стоит в том чтобы текущий пункт меню подсвечивая, но что-то не работает.

Подскажите в чем может быть причина и как её исправить?

$('document').ready(function() { 
  $('.ddsmoothmenu a').each(function() { 
    if ('http://localhost:8080' + $(this).attr('href') == window.location.href) { 
      $(this).addClass('selected'); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="templatemo_menu" class="ddsmoothmenu"> 
  <ul> 
    <li><a href="index.php">Главная</a></li> 
    <li><a href="about.html">О компании</a></li> 
    <li><a href="products.html">Новые поступления</a></li> 
    <li><a href="faqs.html">Оплата и Доставка</a></li> 
    <li><a href="contact.html">Контакты</a></li> 
    <li><a href="reviews.php">Отзывы</a></li> 
    <li><a href="basket.php">Корзина</a></li> 
 
    <?php if (Auth\User::isAuthorized()): ?> 
    <li><a href="account.php">Мой кабинет</a></li> 
    <?php else: ?> 
 
    <?php endif; ?> 
  </ul> 
  <br style="clear: left" /> 
</div>

Answer 1

HTML

У вас ошибка в том, что в ссылках указан относительный путь, тогда как JS возвращает абсолютный. Исправьте ссылки.

jQuery

Данный вариант более гибок:

$('document').ready(function() {
    $('.ddsmoothmenu a').each(function () {
        var location = window.location.href;
        var link = this.href; 
        if(location == link) {
            $(this).addClass('active');
        }
    });
});