Использование jQuery для установки активного класса в PHP

Question

Во-первых, почему я всегда получаю downvoted, когда я спрашиваю об этом вопросе? Вот вопрос.

У меня есть тег PHP в a href.

Вот мой код:

<nav class="main-navi"> 
<ul> 
    <li> 
     <a href="?r=site/index" > 
      Home 
      <span class="dot"></span> 
      <span class="corner"></span> 
     </a> 
    </li> 
    <li> 
     <a href="?r=site/fotoportfolio"> 
      Portfolio 
      <span class="dot"></span> 
      <span class="corner"></span> 
     </a> 
    </li> 
    <li> 
     <a href="?r=site/fotoabout"> 
      About 
      <span class="dot"></span> 
      <span class="corner"></span> 
     </a> 
    </li> 

    <li> 
     <a href="?r=site/fotoservice"> 
      services 
      <span class="dot"></span> 
      <span class="corner"></span> 
     </a> 
    </li> 
    <li> 
     <a href="?r=site/fotoblog"> 
      Blog 
      <span class="dot"></span> 
      <span class="corner"></span> 
     </a> 
    </li> 
    <li> 
     <a href="?r=site/fotocontact"> 
      contacts 
      <span class="dot"></span> 
      <span class="corner"></span> 
     </a> 
    </li> 
</ul> 
<em id="showHideMenu" class="show-hide-menu fa fa-bars" href="#"></em></nav> 

И есть 2 сценариев:

<script> 
    var loc = window.location.href; 
    $('.main-navi ul li a').each(function() { 
     var status = loc.indexOf($(this).attr('href')) > -1; 
     $(this).toggleClass('active', status); 
    }); 
</script> 
<script> 
    console.log(location.href); 
</script> 

Первая функция скрипта дать active класс, когда я загрузить страницу, а второй скрипт только для знать местоположение ссылки.

Во втором сценарии, у меня есть выход в консоли, как это:

?r=site/index 

А Ссылка:

localhost/blablabla/frontend/web/?r=site/index 

Проблема: Я не имею класс active в навигационной панели всякий раз, когда я загружаю страницу.

Пример: Если я загружаю индекс, «home» не получает класс active. Что я делаю не так? Благодарю.

Answer 1

ToogleClass() не работает должным образом. Измените его на:

if (status) { 
    $(this).addClass('active'); 
} 

https://jsbin.com/beyinaxoka/edit?html,js,console,output

Answer 2

Я исправил ошибку. Мне нужно было добавить $(document).ready(function() { });, и это сработало как шарм.