选择子菜单后如何使导航栏的主菜单处于活动状态（突出显示）

Question

I have a bootstrap nav bar with main menus and some submenus. all I need to do is to make one of the main menu active(highlighted) after I click to select its submenu. For example, if I click to select "For Shippers", "HOW IT WORKS" should become active and highlighted. Right now I can only make the main menu active if I select it, but it does not work with submenu. Probably it just needs javascript or Jquery addition to my code below, but I am not very familiar with Jquery; I appreciate any help:

 $(function() { // highlight the current nav $("#index a:contains('HOME')").parent().addClass('active'); $("#shippers a:contains('SHIPPERS')").parent().addClass('active'); $("#carriers a:contains('CARRIERS')").parent().addClass('active'); $("#carrier_signup a:contains('First Time User Sign Up')").parent().addClass('active'); $("#carrier_login a:contains('Current User Login')").parent().addClass('active'); $("#about a:contains('ABOUT US')").parent().addClass('active'); $("#contact a:contains('CONTACT US')").parent().addClass('active'); $("#howitworks a:contains('HOW IT WORKS')").parent().addClass('active'); $("#hiw_shippers a:contains('FOR SHIPPERS')").parent().addClass('active'); $("#hiw_carriers a:contains('FOR CARRIERS')").parent().addClass('active'); // make menus drop automatically with hover for dropdown menu $('ul.nav li.dropdown').hover(function() { $('.dropdown-menu', this).fadeIn(); }, function() { $('.dropdown-menu', this).fadeOut('fast'); }); }) 

 .navbar-default { background-color: #0064ff; } .navbar-default .navbar-brand { color: white; } .navbar-default .navbar-nav>li>a { color: white; } .navbar-default .navbar-nav>li>a:hover { background-color: #E8E8E8; } .navbar { margin-bottom: 0; } .icon-bar { margin: -20px 0px -20px 3px; } .active { background-color: #E8E8E8; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button> <a class="navbar-brand" href="#">&nbsp;&nbsp;America<span class="glyphicon glyphicon-star-empty"></span>Shipping Choice &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </div> <div class="collapse navbar-collapse dropdown" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="index.php">HOME</a></li> <li><a href="Shippers_login.php">SHIPPERS</a></li> <!--<li><a href="Carriers.php">CARRIERS</a></li>--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">CARRIERS <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="carrier_signup.php">First Time User <span class="glyphicon glyphicon-arrow-right"></span> Sign up</a></li> <li><a href="carrier_login.php">Current User <span class="glyphicon glyphicon-arrow-right"></span> Login</a></li> </ul> </li> <li><a href="about.php">ABOUT US</a></li> <li><a href="contact.php">CONTACT US</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">HOW IT WORKS <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="howitworks_shippers.php"><span class="glyphicon glyphicon-arrow-right"></span> For Shippers</a></li> <li><a href="howitworks_carriers.php"><span class="glyphicon glyphicon-arrow-right"></span> For Carriers</a></li> </ul> </li> </ul> </div> </div> </nav> 

Answer 1

You need to highlight when hover or click? Because, if on click I don't see any point to highlight its parent. It will go to other page already.

But if on hover. You can add this to your CSS.

li:hover > a {background-color: #E8E8E8;}
li:hover a:hover {background-color: #E8E8E8;}

@

Add this to your JAVASCRIPT if you want on click

$(".dropdown-menu > li > a").on("click",function(x){
    var tgt     = $(this).closest(".dropdown").children("a");
    if(!tgt.hasClass("active"))
        tgt.addClass("active");
  x.preventDefault();
});

$("li").on("mouseover",function(){
    var tgt     = $(this).children("a");
    if(tgt.hasClass("active"))
        tgt.removeClass("active");
});