neda Derakhshesh neda Derakhshesh - 1 month ago 10
CSS Question

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

I have a partial view which I used it for all my views as a menu

I import this menue above all of the views with this line code

@Html.Partial("_MainMenu")


mainly i want to change
class:"active"
between views but i don't know how it is possible in this structure.

my problem is that I want when user opens a link in menu, first omit
class:"active"
from all of the tags and then add
class active
for that same link which user opens.
for example when user is in home-index then its tag has class active so Home text in menu has a lighter color and then when user is for example in contact_us view I want the contact us text in menu has a lighter color by giving active class.

Appreciate any help. thanks

this is my partial menu view if needed , default is for 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 is for 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 By 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">
ABOUT US
<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>



Answer

You can use javascript/jquery to set the active class.

Remove the initial class="active" for your 'default' <li> element and give each <li> element a unique id attribute (something that relates to the name of the controller and/or action method), for example

<li id="Index">...</li>
<li id="Tours">...</li>

to allow them to be selected. Then in each view add a script to select the associated element and set the class name, for example in Index.cshtml

$('#Index').addClass('active');

Alternatively, have a single script in your layout file that sets the class name based on a value passed to the view from the controller method, for example

$('#' + '@ViewBag.ActiveMenu').addClass('active');

and the in each controller method, pass the associated id to the view, for example in the Index() method

ViewBag.ActiveMenu = "Index";
return View(..);