jquery - How to change class active for a menu which is partial ASP.NET MVC -

i have partial view used views menu

i import menue above of views line code

@html.partial("_mainmenu") 

mainly want change class:"active" between views don't know how possible in structure.

my problem want when user opens link in menu, first omit class:"active" of tags , add class active same link user opens. example when user in home-index tag has class active home text in menu has lighter color , when user example in contact_us view want contact text in menu has lighter color giving active class.

appreciate help. thanks

this partial menu view if needed , default home index

<div id="mainnav" class=""> <nav class="navbar navbar-default" role="navigation">     <div id="topmenu" class="fixsaz">      </div>       <div class="row">         <div class="navbar-header col-md-4 col-sm-6">               <a class="" id="titlename" href="home">                 <img class="" src="~/content/img/logo/iranjourney.png" alt="iranholiday.com" />             </a>         </div>         <div class="col-md-8 col-sm-10 collapse navbar-collapse overflowshow" id="example-navbar-collapse">              <ul id="mainul" class="nav navbar-nav  overflowshow">                 <li class="active">// default home index                      @html.actionlink("home", "index", "home")                  </li>                   <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">                         our tours                         <b class="caret"></b>                     </a>                      <ul class="dropdown-menu">                         <li>                             <a href="#">scheduled group tours</a>                         </li>                         <li><a href="/tours_by_category/index">tours category</a></li>                       </ul>                  </li>                  <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">                          <b class="caret"></b>                     </a>                    </li>                   <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">                         our services                         <b class="caret"></b>                     </a>                    </li>                    <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">                                                 <b class="caret"></b>                     </a>                      <ul class="dropdown-menu">                         <li>                             <a href="/home/about_us">                                 <p>team work</p>                                 <p>certificates</p>                                 <p>statistics</p>                                 <p>our agents</p>                             </a>                         </li>                       </ul>                  </li>                  <li>                     @html.actionlink("contact us", "index", "contact_us")                   </li>              </ul>          </div>     </div>      </nav> 

you can use javascript/jquery set active class.

remove initial class="active" 'default' <li> element , give each <li> element unique id attribute (something relates name of controller and/or action method), example

<li id="index">...</li> <li id="tours">...</li> 

to allow them selected. in each view add script select associated element , set class name, example in index.cshtml

$('#index').addclass('active'); 

alternatively, have single script in layout file sets class name based on value passed view controller method, example

$('#' + '@viewbag.activemenu').addclass('active'); 

and in each controller method, pass associated id view, example in index() method

viewbag.activemenu = "index"; return view(..);