Apply active CSS on Menus on Master Pages

In this blog you will learn how to apply active CSS on menus on Master Pages.

Introduction

 

Apply active CSS on menus on Master Pages from code behind without javascript.

 

In our web applications

 

We face problems when using a Master Page. How to set the class for the active tab?

 

Here we can set active class

<ul>
    <li id="page1" runat="server" >
        <a href="studentHomePage.aspx"> Dashboard    </a>
    </li>
    <li id="page2"  runat="server">
        <a href="Mytest.aspx">   My Test</a>
    </li>
    <li id="page3"  runat="server">
        <a href="TestReport.aspx">Test Report</a>
    </li>
    <li id="page4"  runat="server">
        <a href="Subscription_New.aspx">Subscribe</a>
    </li>
</ul>

Code Bheind

page_load {
  String activepage= Request.RawUrl;if(activepage .Contains("studentHomePage.aspx")){page1.Attributes("class") = "active";
}
else if(activepageactivepage .Contains("Mytest.aspx")) {
  page2.Attributes("class") = "active";
}
else if( activepage.Contains("TestReport.aspx") ) {
  page3.Attributes("class") = "active";
}
else if( activepage.Contains("Subscription_New.aspx")) {
  page4.Attributes("class") = "active";
}}

Screen Shots

 

Tab 1

 

 

Tab 2