can't get the start page highlighted asp.net | jquery | Postback de-highlighting the menu items

Question

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>

Answer 1

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();