I have this in my master page. I am able to highlight menu when I click on it but I can't get my start page of the website highlighted when the website is opened and start page loads. Entry is my start page.
EDIT: I saw that on post back the highlight goes away. How can I prevent it ?
<script type="text/javascript"> $(document).ready(function () { var url = window.location; $('.navbar .nav').find('.active').removeClass('active'); $('.navbar .nav li a').each(function () { if (this.href == url) { $(this).parent().addClass('active'); } }); }); </script> <nav class="navbar navbar-default" style="margin-bottom: -20rem; clear: none; background-color: white; border-color: white;"> <div style="margin-left: 0px;"> <div class="navbar-header"> <img src="../../Images/_logo.png" width="130" height="40" style="margin-right: 30px;" /> </div> <div id="myNavbar"> <ul class="nav navbar-nav" id="menusite"> <li class="active"><a id="A1" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Entry")%>" title="Entry">Entry</a></li> <li><a id="A7" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Ideation")%>" title="Ideation">Ideation</a></li> <li><a id="A3" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Search")%>" title="Search">Search</a></li> <li><a id="A2" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Search?action=All")%>" title="AllSearch">Show All Projects</a></li> <li><a id="A4" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Admin")%>" title="Admin">User Admin</a></li> <li><a id="A5" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Maintenance")%>" title="Maintenance">Maintenance</a></li> <li><a id="A6" style="outline: 0; cursor: pointer;" href="<%= Page.ResolveUrl("~/Pages/ABC")%>" title="ABC">ABC</a></li> <li><a id="A8" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/BCRT")%>" title="BCRT">BCRT</a></li> </ul> </div> <div class="float-right" style="border-left: thick solid orange; margin-right: 2rem; padding-left: 2px"> <asp:Label ID="lblUser" runat="server" /> <br /> <asp:LinkButton ID="lnkSignOut" Text="Sign Out" OnClick="lnkSignOut_Click" runat="server" ForeColor="Blue" /> </div> </div> </nav> 3 Answers
Answers 1
In your code , you used window.location instead of window.location.href , window.location is an object and contains href property that shows active page url
$(document).ready(function () { // var url = window.location; this is an object var url = window.location.href; $('.navbar .nav').find('.active').removeClass('active'); $('.navbar .nav li a').each(function () { if (this.href == url) { $(this).parent().addClass('active'); } }); });
Answers 2
Which href does <%= Page.ResolveUrl("~/Pages/Entry") %> generate in your code?
It could be that http://your-website.com/ and http://your-website.com/Pages/Entry, for example, lead to the same page – even though they are different URLs, which is why equality checking against window.location.href may fail.
I recommend to debug your window.location.href and 'homepage link' href:
$(document).ready(function () { var url = window.location.href, // window.location is an object! entryUrl = $('.navbar a#A1').attr('href'); alert( "browser location: " + url + "\n" + "entry location: " + entryUrl ); }); I assume that this will give you two different results – something like this:
browser location: / entry location: /Pages/Entry You could then just highlight the first link tag of the .navbar if your browser location equals the index page:
$(document).ready(function () { var url = window.location.href; $('.navbar .nav').find('.active').removeClass('active'); if (url === '/') { $('.navbar .nav li:first > a').addClass('active'); } else { $('.navbar .nav li a').each(function () { if (this.href == url) { $(this).parent().addClass('active'); } }); } }); Answers 3
You could also create the menu in the code, that gives you a little more control and you don't need javascript anymore.
//create a list with the menu items List<string> menu = new List<string>(); menu.Add("Entry"); menu.Add("Ideation"); menu.Add("Search"); //make a stringbuilder StringBuilder sb = new StringBuilder(); //loop all the items to build the menu foreach (string s in menu) { //check the url for the page name string cssClass = ""; if (Request.RawUrl.ToLower().Contains("/" + s.ToLower())) { cssClass = "active"; } //add the menu item to the stringbuilder sb.AppendLine(string.Format("<li><a href=\"{0}\" title=\"{0}\" class=\"{1}\">{0}</a></li>", s, cssClass)); } //set the menu in the aspx page Literal1.Text = sb.ToString(); 
0 comments:
Post a Comment