Как применять классы на основе открытых ссылок?

Question

В моем меню боковой панели есть возможность расширять и раскрывать подразделы раздела, как показано ниже. Раздел open имеет класс open active, а при нажатии на ссылку есть класс active.

Все мои ссылки имеют разные #url. Так это определит классы.

Как я могу автоматически разместить классы и active на основе открытой ссылки? Я также могу использовать PHP.

<ul class="menu-items scroll-content"> 
<li class="open active"> 
    <a href="javascript:;"><span class="title">first section</span> 
<span class="open arrow"></span></a> 
<span class="icon-thumbnail">LV</span> 
    <ul class="sub-menu"> 
     <li class="active"> 
      <a href="page.php#first1">First Section 1</a> 
      <span class="icon-thumbnail">au</span> 
     </li> 
     <li class=""> 
      <a href="page.php#first2">First Section 2</a> 
      <span class="icon-thumbnail">ou</span> 
     </li> 
    </ul> 
</li> 
<li class=""> 
    <a href="javascript:;"><span class="title">Second section</span> 
<span class="arrow"></span></a> 
<span class="icon-thumbnail">LV</span> 
    <ul class="sub-menu"> 
     <li class=""> 
      <a href="secondpage.php#second1">Second Section 1</a> 
      <span class="icon-thumbnail">au</span> 
     </li> 
    </ul> 
</li> 
</ul> 

Answer 1

Попробуйте так:

HTML:

<ul> 
    <li class=""> 
      <a href="javascript:;"><span class="title">first section</span> 
      <ul class="sub-menu"> 
        <li class=""> 
          <a href="page.php#first1">First Section 1</a> 
          <span class="icon-thumbnail">au</span> 
        </li> 
        <li class=""> 
          <a href="page.php#first2">First Section 2</a> 
          <span class="icon-thumbnail">ou</span> 
        </li> 
      </ul> 
    </li> 
    <li class=""> 
      <a href="javascript:;"><span class="title">Second section</span> 
      <ul class="sub-menu"> 
        <li class=""> 
          <a href="secondpage.php#second1">Second Section 1</a> 
          <span class="icon-thumbnail">au</span> 
        </li> 
      </ul> 
    </li> 
</ul> 

JS:

var href = location.pathname+location.hash; 

$('.sub-menu > li > a').each(function() { 
    if ($(this).attr("href") == href) { 
      $(this).parent('li').addClass('active'); 
      $(this).parent().parent().parent('li').addClass('open active'); 
    } 
});