Cannot get homepage allocated by asp.net | jquery | Alternately highlighting menu items

Question

I have it on my main page. I can highlight the menu when I click on it, but I cannot get the start page of the website highlighted when I open the website and load the page. The post is my start page.

EDIT: I saw the backlight go off on the back. How can I prevent this?

<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

Actually, I really did this every time I load the page and worked perfectly.

 ScriptManager.RegisterStartupScript(Page, GetType(), "try", "<script>document.getElementById('liReports').style.backgroundColor = '#fbb534';</script>", false);
        ScriptManager.RegisterStartupScript(Page, GetType(), "try1", "<script>document.getElementById('s6').style.color = 'White';</script>", false);

Site.Master:

<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 id="liHome" class="active">
                                <a id="A1" style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Home")%>" title="Home"><span id="sHome">Home</span></a>
                            </li>
                            <li id="liEntry"><a style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Entry")%>" title="Entry"><span id="s1">Entry</span></a></li>

                            <li id="liSearch"><a style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Search")%>" title="Search"><span id="s3">Search</span></a></li>
                            <li id="liReports"><a style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Reports")%>" title="Reports"><span id="s6">Reports</span></a></li>
                            <li id="liAdmin" runat="server"><a style="outline: 0;" href="<%= Page.ResolveUrl("~/Pages/Admin")%>" title="Admin"><span id="s4">Admin</span></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 style="float:right;" ID="lnkSignOut" Text="Exit" OnClientClick="window.close()" runat="server" ForeColor="Blue" />
                    </div>
                </div>
            </nav>

Answer 2

You can also create menus in code, which will give you a little more control and you no longer need javascript.

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

Answer 3

window.location window.location.href, window.location - href, 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');
                    }
                });
            });

Answer 4

href <%= Page.ResolveUrl("~/Pages/Entry") %> ?

, http://your-website.com/ http://your-website.com/Pages/Entry, , - URL-, window.location.href .

window.location.href 'homepage' 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
    );
});

, - - :

browser location: /
entry location: /Pages/Entry

.navbar, :

$(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');
            }
        });
    }
});