setting active class in c#.net masterpage

Question

<div id="navigation"> 
   <ul class="nav nav-pills">
      <li role="presentation"><a href="Default.aspx">Home</a></li>
      <li role="presentation"><a href="open-account.aspx">Open Account</a></li>
      <li role="presentation"><a href="atm_authenticate.aspx">ATM</a></li>
      <li role="presentation"><a href="#">Branch Locator</a></li>
      <li role="presentation"><a href="#">Contact US</a></li>
   </ul>
</div>

I want to set active class in li tag based on the visited link, I have tried several answers from Stackoverflow but none seems to me working.

For your information, I am using Bootstrap, C#, Visual Studio for my development.

Answer 1

Your elements should look like (in master.page):

<li role="presentation" id="liDefault" runat="server"><a href="Default.aspx">Home</a></li>

public String linkDefault
{
    get 
    {
        return "not_active";
    }
    set
    {
        liDefault.Attributes.Add("class", "" + value + "");
    }
}

Then add following to your head part of content page:

<%@ MasterType VirtualPath="~/MasterPage.master" %>

And code behind of your content page:

this.Master.linkDefault = "active";

Answer 2

You can achieve it using Jquery.

First set single class on all anchor tags in you li tags ie:

<div id="navigation"> 
   <ul class="nav nav-pills">
      <li role="presentation"><a href="Default.aspx" class="link">Home</a></li>
      <li role="presentation"><a href="open-account.aspx" class="link">Open Account</a></li>
      <li role="presentation"><a href="atm_authenticate.aspx" class="link">ATM</a></li>
      <li role="presentation"><a href="#" class="link">Branch Locator</a></li>
      <li role="presentation"><a href="#" class="link">Contact US</a></li>
   </ul>
</div>

Now in jquery you have to check if any anchor tag is clicked so an "active" class will be set to its parent li tag. ie:

$(".link").click(function(){
   $(this).parent().addClass("active");
})

Hope its works.