How to add a css class dynamically for selected menu item?

Question

I want to add "active" class for the selected menu item in Sitecore. I tried to add class by using jquery but whenever we click on menu the particular page is opening and that menu is loading again. So class is getting added and removed immediately. Is there any way to add class for selected menu in the code behind ?

My Aspx page code:

<asp:Repeater ID="rpNav" ItemType="Sitecore.Data.Items.Item" runat="server">
    <HeaderTemplate>
        <ul class="menu">
    </HeaderTemplate>
    <ItemTemplate>
        <li>
         <asp:HyperLink Id="HyperLink1" Text=<%#: Item.DisplayName %> 
          NavigateUrl=<%#: Sitecore.Links.LinkManager.GetItemUrl(Item,new Sitecore.Links.UrlOptions{UseDisplayName=true})%> runat="server"  />

        </li>
   </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

My Back-end code:

protected void Page_Load(object sender, EventArgs e)
    {
        Item home = Sitecore.Context.Database.GetItem("/sitecore/content/Home");
        Item[] children = home.Children.ToArray();
        rpNav.DataSource = children;
        rpNav.DataBind();
    } 

Answer 1

You can add a conditional statement for li to add active class on it

Example -

<li class='<%= Sitecore.Context.Item.ID.ToString() == Eval("ID").ToString() ? "active" : "" %>'> {Add code to render link} </li>