实现按钮点击变色

最新推荐文章于 2024-02-12 16:04:12 发布

yangl222

最新推荐文章于 2024-02-12 16:04:12 发布

阅读量4.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yangl222/article/details/51224991

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

</pre><pre name="code" class="html"><img src="https://img-blog.csdn.net/20160505153431665?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />效果

<pre name="code" class="html"><style type="text/css">

body { margin: 0; padding: 0; } .container { font-family: 微软雅黑; background: #fff; padding: 0px; margin: 10px auto; overflow: hidden; } .container .menu { width: 120px; margin-left: 0px; float: left; border-right: 1px solid #aaa; } .container .menu ul { display: none; } .container .menu ul li { height: 28px; line-height: 28px; } .container .menu ul li a:hover { background: #9FB6CD; color: #fff; } ul { list-style: none; } a { text-decoration: none; color: #000; font-size: 14px; display: block; width: 100px; height: 26px; padding-left: 10px; } .container .menu .selected { background: #ccc; } </style>

<script type="text/javascript">
        $(document).ready(function () {

            function myfunction(li, li_a, menu_tab) {
                li.click(function () {
                    var index = $(this).index();
                    menu_tab.eq(index).addClass("active").siblings().removeClass("active");
                    li_a.removeClass("selected");
                    li_a.eq(index).addClass("selected").siblings().removeClass("selected");

                });
            }

            myfunction($(".container .menu .ulmenu1 li"));
            myfunction($(".container .menu .ulmenu2 li"));
            myfunction($(".container .menu .ulmenu3 li"));

            $(function () {            //ul/li的折叠效果
                $(".menu > ul").eq(0).show();
                $(".menu h3").click(function () {
                    //找menu对应的tab
                    $(".menu_tab > div").removeClass("active");

                    var val = ($(this).next().attr('class'));
                    var menu_value = (val.substring(val.length - 1));
                    $(".container .content .menu" + menu_value + " .tab:first-child").addClass("active");
                    $(".container .menu .ulmenu" + menu_value + " li>a").removeClass("selected");
                    $(".container .menu .ulmenu" + menu_value + " li a").eq(0).addClass("selected"); //默认设置为被选中状态

                });

            });

            $(function () {   // 导航 >
                $(".container .menu > h3").click(function () {
                    $(".container .content .A1").empty().text($(this).text());
                });
            });

        });
        //按钮变色
        function ss(x) {
            $(".container .menu .ulmenu1 li>a").removeClass("selected");
        };
    </script>

                    <div class="container" style="padding: 0px; width: 110px;">
                        <div class="menu" style="margin-left: 0px;">
                            <ul class="ulmenu1">
                                <li>
                                    <asp:LinkButton ID="btnDWJBQK" runat="server" OnClick="btnDWJBQK_Click" OnClientClick="ss(this)"
                                        EnableViewState="false">单位基本情况</asp:LinkButton>

                                </li>
                                <li>
                                    <asp:LinkButton ID="btnRYJBQK" runat="server" OnClick="btnRYJBQK_Click" OnClientClick="ss(this)"
                                        EnableViewState="false">人员基本情况</asp:LinkButton>
                                </li>
                            </ul>
                        </div>
                    </div>

        protected void btnDWJBQK_Click(object sender, EventArgs e)
        {
            btnClick("DWJBQK", "单位基本情况；");
            btnDWJBQK.CssClass = "selected";
        }

        protected void btnRYJBQK_Click(object sender, EventArgs e)
        {
            btnClick("RYJBQK", "人员基本情况；");
            btnRYJBQK.CssClass = "selected";
        }