I have a mainmenu view:
<div class="submenu">
<ul>
@foreach (var p in Model)
{
<li>
<div class="manu_bg">
@Html.ActionLink(p.Name, "ListProductByGroupID", "Product", new { GroupID = p.GroupCategoryID, GroupName = p.Name }, null)
</div>
@{Html.RenderAction("ListCateByGroupID", "Category", new { GroupID = p.GroupCategoryID });
}
</li>
}
</ul>
</div>
and the View of submenu in mainview:
@foreach (var i in Model)
{
<li>
@Html.ActionLink(i.Name, "ListProductByCateID", "Product", new { CateID = i.CategoryID, CateName = i.Name }, new { id="link"})
</li>
}
and a little Javascript to add css class for active link:
window.onload = ActiveLink;
function ActiveLink() {
var link = document.getElementById("link");
link.onclick = showActive;
}
function showActive() {
var selectedlink = this.text;
var link = document.getElementById("link");
if (link.text == selectedlink) {
link.className = " active";
}
else { link.className = ""; }
}
My javascript is not working?
Add an ID to that link so you can find it:
@Html.ActionLink(i.Name, "ListProductByCateID", "Product", new { CateID = i.CategoryID, CateName = i.Name }, new { id = "ListByCatLink" })</div>
Then select it by ID and add the class...
using pure Javascript:
var link = document.getElementById("ListByCatLink");
link.className = link.className + " active";
or jQuery if you're using that:
$("#ListByCatLink").addClass("active");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.