php - How to Keep the parent menu highlighted when I click on its child menu -

i using following jquery

<script>   $(document).ready(function () {     $('#menu-wplook-main-menu').find('li a').click(function () {       $('#menu-wplook-main-menu').find('li a').removeclass('active');       $(this).addclass('active');       $($(this)         .closest('li.menu-item')         .children()[0]).addclass('active');     });   }); </script> 

my css

<style>   #menu-wplook-main-menu li a.active {     color:#e53b51;     background: blue;   } </style> 

my html

<ul class="nav nav-tabs" role="tablist" id="menu-wplook-main-menu" >   <li role="presentation">      <a class="dropdown-toggle has-submenu cursor_pointer" href="index.php"> home </a>                                        </li>   <li role="presentation menuli menulixl root" class="menu-item">     <a class="dropdown-toggle has-submenu cursor_pointer cursor_pointer" href=""> services <span class="sub-arrow"></span> </a>     <ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">       <li class="col-xs-12">         <!--<a class="splhed" href="">software development</a>-->         <a class="levelmenu" href="trav_port.php">travel portal development</a>         <a class="levelmenu" href="gds_integ.php">gds integrations</a>         <a class="levelmenu" href="xml_api_integ.php">xml/api integrations</a>         <a class="levelmenu" href="white_label_web.php">white label website</a>         <a class="levelmenu" href="hotel_cab_portal.php">hotel & cab portal development</a>           <a class="levelmenu" href="travel_web.php">travel website designing</a>            <a class="levelmenu" href="mobile_app_dev.php">mobile apps development</a>       </li>     </ul>   </li>   <li role="presentation" class="menu-item">     <a class="dropdown-toggle has-submenu cursor_pointer" href=""> products <span class="sub-arrow cursor_pointer"></span> </a>     <ul class="dropdown-menu multimenu multimenuxl vbghno sm-nowrap" style="min-width: 10em; max-width: 40em; top: auto; left: 0px; margin-left: -117px; width: auto; margin-top: -1px;">       <li class="col-xs-12">          <a class="levelmenu" href="trav_portal.php">travel portal</a>         <a class="levelmenu" href="travsoft.php">travsoft</a>         <a class="levelmenu" href="white_label.php">white label</a>         <a class="levelmenu" href="hotel_extranet.php">hotel extranet</a>          <a class="levelmenu" href="holiday_manage.php">holiday management system</a>           <a class="levelmenu" href="hotrl_crs.php">hotel crs</a>        </li>     </ul>                  </li>                </ul> 

if not use php link in href works perfectly. if use php link in href not working.

question

should change in php file?

it seems working fine. jquery bit cleaned up. example:

$('#menu-wplook-main-menu li a').click(function () {     $('#menu-wplook-main-menu .active').removeclass('active');     $(this).addclass('active');     $(this).closest('li.menu-item').children().first().addclass('active'); }); 

but think main problem when clicking links navigate new page. reload whole menu, , have no state of left. , start scratch.

you need function perhaps take page current address, menu item , highlight it.

if replace .php links #1, #2 etc works fine.

so either load function, or load stuff ajax maybe.