Highlight links in navigation bar when on current page
Question
I have a site written in ASP.NET and C# backend. I'm trying to create an indicator for my navigation bar, so that when you're on a certain page, the link for the current page will be highlighted. I've tried different approaches but none have worked for me.
This is my HTML:
<div class="nav sidebar">
<ul id="navmenu" class="navmenu" runat="server">
<li id="link1"><a id="linkone" onserverclick="linkone_onclick" runat="server"><h2>Link 1</h2></a></li>
<li id="link2"><a id="linktwo" onserverclick="linktwo_onclick" runat="server"><h2>Link 2</h2></a></li>
</ul>
</div>
The jQuery: This changed the color but as soon as the page loaded to the link I clicked on, the color was removed, so this did not work:
$function(){
$('#navmenu li').click(function(){
$('#navmenu li').removeClass();
$(this).toggleClass('active');
});
});
My active class in the CSS:
.navmenu ul li:hover{background-color:yellow;}
#navmenu ul li:active{background-color:yellow;} //Trying to highlight the entire `<li>` element.
I also tried with this JS snippet so that the color could stay when the page reloads, but again, this did not work:
<script type="text/javascript">
$(function() {
var url = window.location.href;
$("#navmenu a").each(function() {
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
</script>
And finally, I tried the approach where I would change the id of the <body> tag each time the page loads to a new page, and then change the style with the CSS, but this did not work. When I used the developer tools to inspect the <body> tag, the id would always be blank: <body id="">
C#:
public partial class MyClass:System.Web.UI.MasterPage{
public string bodyId; //Also tried public string bodyId{get; set;}
protected void Page_Load(Object s, EventArgs e){}
protected void linkone_onclick(Object s, EventArgs e){
Response.redirect("pageone.aspx");
bodyId="linkoneid";
}
protected void linktwo_onclick(Object s, EventArgs e){
Response.redirect("pagetwo.aspx");
bodyId="linktwoid";
}
And in my .NET:
<body id="<%=bodyId%>">
How can I get the link to highlight when I'm on the current page? At this point I'll take any solution that will work (jQuery, C#, pure JavaScript, CSS). I would appreciate any help with this.
2 answers
solution1
0 ACCPTED 2015-11-29 15:43:15
You could try something like this:
<div class="nav sidebar">
<ul id="navmenu" class="navmenu" runat="server">
<li runat="server" id="Home"><a id="Homelink" href="default.aspx">
<h2>Home</h2>
</a></li>
<li runat="server" id="link1"><a id="linkone" href="linkone.aspx">
<h2>Link 1</h2>
</a></li>
<li runat="server" id="link2"><a id="linktwo" href="linktwo.aspx">
<h2>Link 2</h2>
</a></li>
</ul>
</div>
And then in your master page load method:
string TargetPage = Page.AppRelativeVirtualPath;
if (TargetPage.ToLower().Contains("one"))
{
link1.Attributes.Add("style", "background: red;");
}
else if (TargetPage.ToLower().Contains("two"))
{
link2.Attributes.Add("style", "background: blue;");
}
else
{
link1.Attributes.Add("style", "background: white;");
link2.Attributes.Add("style", "background: white;");
}
Disclaimer: This mechanism a bit crude, but it sounds like you are looking for an immediate pay-off and it does achieve that.
You could also take the basic concept expressed here and move it to a jquery solution. IE: find the links based on, say style, get the current location name, and add the 'active' style based the link that has the same name as the current location.
JQuery option:
<form id="form1" runat="server">
<div class="nav sidebar">
<ul id="navmenu" class="navmenu" runat="server">
<li runat="server" id="Home"><a id="Homelink" href="default.aspx">
<h2>Home</h2>
</a></li>
<li id="linkonepage"><a id="link1" href="linkonepage.aspx">
<h2>Link 1</h2>
</a></li>
<li id="linktwopage"><a id="link2" href="linktwopage.aspx">
<h2>Link 2</h2>
</a></li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript">
$().ready(function () {
var href = document.location.href;
var lastPathSegment = href.substr(href.lastIndexOf('/') + 1).replace('.aspx', '').toLowerCase();
var v = $('#' + lastPathSegment);
if (v.length) {
v.attr('style', 'background: red;');
}
});
</script>
solution2
0 2015-11-29 16:14:06
Since you are setting bodyId as the link id + "id" then you can do it like following.
$(function() {
var linkid = $('body').attr('id').slice(0, -2);
$('#'+linkid).closest("li").addClass("active");
});
Hope it helps.
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.