How to set navbar item as active when user selects it?

Question

I am a new ASP.NET Web Forms developer and trying to use Twitter Bootstrap with the Master Page. I am struggling with setting navbar item as active when user selects it. I creat

Answer 1

For those as myself that prefer server-side implementations, transform your li tags of interest to runat="server" on the Master.Page file. The code in question will look something similar to this:

 <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item" runat="server" id="tabHome" >
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item" runat="server" id="tabContact">
                        <a class="nav-link" href="/Contact">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" runat="server">Hello, <asp:LoginName runat="server" />
                        </a>
                    </li>
                </ul>
            </div>

Then in the code behind of the Master page - Site.Master.vb or Site.Master.cs, depending on the language used - add the following in the Page Load event:

VB.Net implementation:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim thisURL As String = Request.Url.Segments(Request.Url.Segments.Count - 1)

    Select Case thisURL
        Case "Default", "default.aspx"  
            tabContact.Attributes.Remove("active")
            tabHome.Attributes.Add("class", "active")
        Case "Contact"
            tabHome.Attributes.Remove("active")
            tabContact.Attributes.Add("class", "active")
    End Select
End Sub

C# implementation:

Protected void Page_Load(Object sender, EventArgs e)
  {
    string thisURL = Request.Url.Segments[Request.Url.Segments.Length - 1];

    switch (thisURL)
    {
        Case "Default":
        Case "default.aspx": 
            {
                tabContact.Attributes.Remove("active");
                tabHome.Attributes.Add("class", "active");
                break;
            }

        Case "Contact" : 
            {
                tabHome.Attributes.Remove("active");
                tabContact.Attributes.Add("class", "active");
                break;
            }
    }
}

Since is "Default.aspx" the page that is supposed to be opened initially, the "Home" menu item will be highlighted as soon the user enters the website. An example is displayed below:

For the sake of simplicity, only two navbar items were used in the example, but the same logic could be implemented if more are required.

I hope can be of help.

Answer 2

var windowUrl = window.location.href.toLowerCase();
//var windowUrl = window.location.href.toLowerCase().split('.')[0];
setTimeout(function () {
    var windowUrl = window.location.href.toLowerCase();
    $('#nav li').removeClass('active');
    $('#nav li').each(function (index) {
        pageUrl = $(this).find('a').attr('href');
        if (windowUrl.indexOf(pageUrl) > -1) {
            $(this).addClass('active');
        }
    });
}, 10);

Answer 3

If you are using navigation bar with dropdown-menu then put below script at end of your master page(before body closing tag):

<script type="text/javascript">
$(document).ready(function () {
    var url = window.location;
    $('ul.nav li a').each(function () {
        if (this.href == url) {
            $("ul.nav li").each(function () {
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                }
            });
            $(this).parent().parent().parent().addClass('active');
        }
    });
});
</script>

This completely worked for me.