为什么Jquery对asp.net中LinkBut​​ton的CssClass属性不起作用？

Question

I have this code:

jquery:

$(".clr").click(function () {
            $(".clr").each(function () {
                $(this).parents("li").css("background", "#000")
            })
            var color1 = "#f8ac00";
            $(this).parents("li").css("background", color1);
        });

ASP.NET:

 <ul id="css3menu1" class="topmenu">

                    <li class="topfirst">
                        <asp:LinkButton ID="lnkbtn_dashbd" CssClass="clr" Height="18" Width="100" runat="server">Dashboard</asp:LinkButton>
                    </li>
                    <li class="topmenu">

                        <asp:LinkButton ID="lnkbtn_events" CssClass="clr" Height="18" Width="100" runat="server">Events</asp:LinkButton>

                    </li>
                    <li class="topmenu">
                        <asp:LinkButton ID="lnkbtn_myaccount" CssClass="clr" Height="18" Width="100" runat="server">My Account</asp:LinkButton>


                    </li>


                    <li class="toplast">
                        <asp:LinkButton ID="lnkbtn_abtus" CssClass="clr" Height="18" Width="100" runat="server">About Us</asp:LinkButton>
                    </li>
                </ul>

Image reference:

I have defined CssClass property of LinkButton, mapping it to Jquery class. But on click, this code is not working. I don't know why? Please help me.

Answer 1

Aside from not knowing what behavior you are getting from the button clicks (page postback?), these are just my suggestions put together for you to try.

Please try the following as a test:

   $(".clr").click(function (e) {
        // Stop the click behavior for now (postback?)
        e.preventDefault();

        // Turn off all the LIs
        $("li:has(.clr)").css("background", "#000");

        // Turn on the closest LI to the clicked linkButton
        var color1 = "#f8ac00";
        $(this).closest("li").css("background", color1);
    })