Active class in Admin LTE template

Reply

hoitm

Member

36 Points

120 Posts

Active class in Admin LTE template

Dec 12, 2016 04:37 AM|hoitm|LINK

i use Admin LTE with asp.net webforms

and i want to when clik to content link and menu is active.

in master page i do

 <li id="navMenus" class="treeview">
                            <a id="idofcss" runat="server" style="cursor: pointer;">
                                <i class="fa fa-edit"></i><span>Infomations</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                            </a>
                            <ul runat="server" class="treeview-menu">
                                <li><a href='<%=ResolveClientUrl("Info/user.aspx")%>'><i class="fa  fa-caret-right"></i>User name</a></li>
                                <li><a href='<%=ResolveClientUrl("Info/changepass.aspx")%>'><i class="fa  fa-caret-right"></i>Chang Pass</a></li>
                            </ul>
                        </li>

and javascipt

 <script type='text/javascript'>
        $(document).ready(function () {
            $("#navMenus").on('click', 'li', function () {
                $("#navMenus li.active").removeClass("active");
                // adding classname 'active' to current click li 
                $(this).addClass("active");
            });
        });
    </script>

but it does not wok. how to slove that, thanks in advance.

Reply

hoitm

Member

36 Points

120 Posts

Re: Active class in Admin LTE template

Dec 13, 2016 01:00 AM|hoitm|LINK

anyone help me, thanks

Reply

Cathy Zou

Star

8670 Points

2882 Posts

Re: Active class in Admin LTE template

Dec 13, 2016 03:02 AM|Cathy Zou|LINK

Hi hoitm,

I try your code,

Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Test.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            $("#navMenus").on('click', 'li', function () {
                $("#navMenus li").removeClass("active");
                // adding classname 'active' to current click li 
                $(this).addClass("active");
            });
        });
    </script>
    <style>
        .active{
            background-color:darksalmon;
        }
a:visited {
 color: green;
}
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul>
 <li id="navMenus" class="treeview">
                            <a id="idofcss" runat="server" style="cursor: pointer;">
                                <i class="fa fa-edit"></i><span>Infomations</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                            </a>
                            <ul runat="server" class="treeview-menu">
                                <li><a href='#'><i class="fa  fa-caret-right"></i>User name</a></li>
                                <li><a href='#'><i class="fa  fa-caret-right"></i>Chang Pass</a></li>
                            </ul>
                        </li>
        </ul>
        
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Content Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Test/Site1.Master" AutoEventWireup="true" CodeBehind="Active class in Admin LTE template.aspx.cs" Inherits="WebApplication2.Test.Active_class_in_Admin_LTE_template" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <p> content page</p>
</asp:Content>

The output screenshot as below:

Is it what you want? if not, would you please point out the wrong place and give more description?

Best regards

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.