Search code examples
jqueryhtmlcssasp.netmaster-pages

How do I make current menu item active in asp.net webforms masterpage using jquery or javascript


How to current menu active

i.e. if i selected and go to that page then the dropdown menu need to active( <li class="active treeview">) in dynamically in asp .net c#.

I want by using jquery or javascript in c#.

All the leftside dropdown list are available in masterpage.

      <li class="treeview" id="settingId" runat="server">
                            <a href="#">
                                <i class="fa fa-files-o"></i>
                                <span>SETTING</span>

                            </a>
                            <ul class="treeview-menu">
                                <li><a href=""><i class="fa fa-circle-o"></i>CATEGORY MANAGEMENT</a></li>
                                <li><a href=""><i class="fa fa-circle-o"></i>ADD CATEGORY</a></li>
                                <li><a href=""><i class="fa fa-circle-o"></i>EMAIL MANAGEMENT</a></li>
                                <li><a href=""><i class="fa fa-circle-o"></i>CHANGE PASSWORD</a></li>
                            </ul>
                        </li>
 <li class="treeview" id="portfolioId" runat="server">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i>
                            <span>PORTFOLIO</span>
                            <i class="fa fa-angle-left pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href=""><i class="fa fa-circle-o"></i>PROJECT MANAGEMENT</a></li>
                            <li><a href=""><i class="fa fa-circle-o"></i>ADD PROJECT</a></li>
                            <li><a href=""><i class="fa fa-circle-o"></i>PRODUCT MANAGEMENT</a></li>
                            <li><a href=""><i class="fa fa-circle-o"></i>ADD PRODUCT</a></li>
                        </ul>
                    </li>

Solution

  • You can put a hidden field in the master page that holds the id of the current tab (parent li). Then set the value of that hidden field in the content pages.

    Use the hidden field's value to determine which tab to highlight. This code assumes the parent ul has id="MasterMenu" and does not have runat="server". Also that the hidden field has id="CurrentTab".

    function highlightTab() {
        var currentTab;
    
        //Get the id of the current tab from the hidden field
        currentTab = $('#CurrentTab').val();
    
        if (currentTab !== null) {
            //Remove the active-treeview class from all top level li elements
            $('#MasterMenu').children('li').removeClass('active-treeview');
    
            //Set the active-treeview class to the current tab
            $('#' + currentTab).addClass('active-treeview');
        }
    }
    

    EDIT:
    Here is an example of a hidden field that you would put on your master page. I'm making it available to the code behind by adding the runat="server" attribute. When a control has runat="server", .NET will rename the id when it renders the page. To stop this behavior so you can easily access the hidden field in JavaScript add the ClientIDMode="static" attribute.

    <asp:HiddenField id="CurrentTab" value="" runat="server" ClientIDMode="static" />
    

    In the page load event of your content pages set the value of that hidden field to the id of the tab you want highlighted for that page.

    HiddenField currentTab;
    currentTab = (HiddenField)this.Master.FindControl("CurrentTab");
    currentTab.Value = "settingId";