<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script async src="//jsfiddle.net/7edwopj1/1/embed/"></script> <ul> <li class="link"> <a class="active">Link 1</a> <ul class="submenu"> <li><a>Sub11</a></li> <li><a>Sub12</a></li> </ul> </li> <li class="link"> <a>Link 2</a> <ul class="submenu"> <li><a>Sub21</a></li> <li><a>Sub22</a></li> </ul> </li> <li class="link"><a>Link 3</a></li> </ul>

ul a { cursor: pointer; } .active { color:red; }

$('.link > a').click(function(){ $('.active').removeClass('active'); $(this).addClass('active'); }); $('.submenu > li').click(function(){ $('.active').removeClass('active'); $(this).addClass('active'); $(this).parent('ul').prev('a').addClass('active'); });