javascript - change menu class active -
javascript - change menu class active -
i want alter menu class active when click submenu. instead code set active default active menu.
$('#menu1').find('li').click(function(){ //removing previous selected menu state $('#menu1').find('li').removeclass('active'); //is element sec level menu? if($(this).closest('ul').hasclass('second-level')){ $(this).parents('li').addclass('active'); //this parent element }else{ $(this).addclass('active'); } });
so illustration
<ul id="menu1" class="nav navbar-nav"> <li class="active" > <a href="{{url::to('/')}}">{{ lang::get('messages.home') }}</a></li> <li class='dropdown '> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> {{ lang::get('messages.vehicles') }} <b class="caret"></b> </a> <ul id = "second-level" class="dropdown-menu"> <li> <a href="form-general.html">{{link_to_action('maintenancecontroller@vehicle_maintenance', lang::get('messages.vehicle_maintenance'),null)}}</a></li> </ul> </li>
when click sec level submenu active class set home menu (default active meanu) after page refresh. how set active menu of submenu?
you can compare url in menu item's link current url on page load:
$(document).ready(function() { $('#menu1 li').each(function() { if (location.href.indexof($('a',this).attr('href'))>=0) { $(this).addclass('active'); } else { $(this).removeclass('active'); }; }); });
however, it's improve add together class or utilize server-side code (depending on how site generated).
javascript jquery
Comments
Post a Comment