Put forecolor for ImageButton when clicked inside DataList using JQuery in ASP.Net

Hi,

You can refer same code given in below link,just change Id as per given

http://www.aspforums.net/Threads/151151/put-forecolor-for-linkbutton-when-click-on-button/

as I told in thread it work for image button that is in<ul>

but my image button is in datalist... I doesn't work for imagebutton that is in datalist

The image button is inside repeater. So you need to change the repeater with datalist.

Image button is not in repeater below is code:

<div id="mainMostanad1S">
<asp:DataList ID="DLSoft" runat="server" RepeatDirection="Vertical" CssClass="dLmostanad">
    <ItemTemplate>
          <asp:ImageButton ID="ImgContinue" runat="server" CssClass="imgconS" ImageUrl="~/Image/Main/ContinueS.gif" CommandArgument='<%# Eval("UrlName")%>' OnClick="ContinueSoft" OnClientClick="return  SetTarget()" ForeColor="Transparent" AlternateText=""></asp:ImageButton>
    </ItemTemplate>
</asp:DataList>

Hi nedash,

Refer the below code.

HTML

Default.aspx

<div>
    <li><a href="#">Software</a>
        <div id="mega6">
        </div>
        <ul>
            <asp:DataList ID="Rptfilm" runat="server">
                <ItemTemplate>
                    <li>
                        <asp:ImageButton ID="ImgContinue" runat="server" CssClass="imgconS" AlternateText='<%# Eval("Secondclass") %>'
                            PostBackUrl='<%#"software.aspx?Secondclass="+Eval("Secondclass")%>'></asp:ImageButton>
                    </li>
                </ItemTemplate>
            </asp:DataList>
        </ul>
    </li>
    <li><a href="#">System</a>
        <div id="mega7">
        </div>
        <ul>
            <asp:DataList ID="rptSystem" runat="server">
                <ItemTemplate>
                    <li>
                        <asp:ImageButton ID="ImgContinue" runat="server" CssClass="imgconS" AlternateText='<%# Eval("Secondclass") %>'
                            PostBackUrl='<%#"software.aspx?Secondclass="+Eval("Secondclass")%>'></asp:ImageButton>
                    </li>
                </ItemTemplate>
            </asp:DataList>
        </ul>
    </li>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            localStorage.removeItem('SelectedMenu');
            $('[id*=ImgContinue]').on('click', function () {
                localStorage.setItem("SelectedMenu", $(this)[0].alt);
            });
        });
    </script>
</div>

Software.aspx

<div style="height: 80px; overflow: auto; width: 300px">
    <div id="dvMenu">
        <li><a href="#">Software</a>
            <ul>
                <asp:DataList runat="server" ID="dlfilm">
                    <ItemTemplate>
                        <li><a href="#" target="_blank">
                            <%#Eval("Secondclass")%></a></li>
                    </ItemTemplate>
                </asp:DataList>
            </ul>
        </li>
        <li><a href="#">System</a>
            <ul>
                <asp:DataList ID="dlSystem" runat="server">
                    <ItemTemplate>
                        <li><a href="#" target="_blank">
                            <%#Eval("Secondclass")%></a></li>
                    </ItemTemplate>
                </asp:DataList>
            </ul>
        </li>
    </div>
</div>
<div>
    <style type="text/css">
        .SelectedActiveMenu
        {
            color: Red !important;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var selctedMenuHtml = localStorage.getItem('SelectedMenu');
            var selectedMenu = $.grep($('[id*=dvMenu] ul a'), function (ele) {
                return $(ele).html().trim() == selctedMenuHtml.trim();
            }).pop();
            $(selectedMenu).addClass('SelectedActiveMenu');
            $(selectedMenu).focus();
        });
    </script>
</div>

Code

Default.aspx

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dtSystem = new DataTable();
        dtSystem.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtSystem.Rows.Add(1, "ورژن های مختلف ویندوز");
        dtSystem.Rows.Add(2, "مکینتاش Mac Os");
        dtSystem.Rows.Add(2, "مکینتاش Linux");
        dtSystem.Rows.Add(2, "مکینتاش Linux1");
        dtSystem.Rows.Add(2, "مکینتاش Linux2");
        dtSystem.Rows.Add(2, "مکینتاش Linux3");
        dtSystem.Rows.Add(2, "مکینتاش Linux4");
        dtSystem.Rows.Add(2, "مکینتاش Linux5");
        dtSystem.Rows.Add(2, "مکینتاش Linux6");
        dtSystem.Rows.Add(2, "مکینتاش Linux7");
        dtSystem.Rows.Add(2, "مکینتاش Linux8");
        rptSystem.DataSource = dtSystem;
        rptSystem.DataBind();

        DataTable dtfilm = new DataTable();
        dtfilm.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtfilm.Rows.Add(1, "نرم افزار های برنامه نویسی");
        dtfilm.Rows.Add(2, "انیمیشن سازی");
        dtfilm.Rows.Add(3, "نرم افزار های طراحی");
        dtfilm.Rows.Add(2, "مکینتاش XYZ1");
        dtfilm.Rows.Add(2, "مکینتاش XYZ2");
        dtfilm.Rows.Add(2, "مکینتاش XYZ3");
        dtfilm.Rows.Add(2, "مکینتاش XYZ4");
        dtfilm.Rows.Add(2, "مکینتاش XYZ5");
        dtfilm.Rows.Add(2, "مکینتاش XYZ6");
        dtfilm.Rows.Add(2, "مکینتاش XYZ7");
        dtfilm.Rows.Add(2, "مکینتاش XYZ8");
        Rptfilm.DataSource = dtfilm;
        Rptfilm.DataBind();
    }
}

Software.aspx

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dtSystem = new DataTable();
        dtSystem.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtSystem.Rows.Add(1, "ورژن های مختلف ویندوز");
        dtSystem.Rows.Add(2, "مکینتاش Mac Os");
        dtSystem.Rows.Add(2, "مکینتاش Linux");
        dtSystem.Rows.Add(2, "مکینتاش Linux1");
        dtSystem.Rows.Add(2, "مکینتاش Linux2");
        dtSystem.Rows.Add(2, "مکینتاش Linux3");
        dtSystem.Rows.Add(2, "مکینتاش Linux4");
        dtSystem.Rows.Add(2, "مکینتاش Linux5");
        dtSystem.Rows.Add(2, "مکینتاش Linux6");
        dtSystem.Rows.Add(2, "مکینتاش Linux7");
        dtSystem.Rows.Add(2, "مکینتاش Linux8");
        dlSystem.DataSource = dtSystem;
        dlSystem.DataBind();

        DataTable dtfilm = new DataTable();
        dtfilm.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtfilm.Rows.Add(1, "نرم افزار های برنامه نویسی");
        dtfilm.Rows.Add(2, "انیمیشن سازی");
        dtfilm.Rows.Add(3, "نرم افزار های طراحی");
        dtfilm.Rows.Add(2, "مکینتاش XYZ1");
        dtfilm.Rows.Add(2, "مکینتاش XYZ2");
        dtfilm.Rows.Add(2, "مکینتاش XYZ3");
        dtfilm.Rows.Add(2, "مکینتاش XYZ4");
        dtfilm.Rows.Add(2, "مکینتاش XYZ5");
        dtfilm.Rows.Add(2, "مکینتاش XYZ6");
        dtfilm.Rows.Add(2, "مکینتاش XYZ7");
        dtfilm.Rows.Add(2, "مکینتاش XYZ8");
        dlfilm.DataSource = dtfilm;
        dlfilm.DataBind();
    }
}

Screenshot