给表格式按钮边框点击变色--css制作表格式按钮（2）-优快云博客

本文链接：https://blog.youkuaiyun.com/orichisonic/article/details/51064089

本文介绍如何使用CSS和jQuery实现表格式按钮的点击效果，当按钮被点击时，其边框颜色会发生变化。通过each和click方法结合，轻松实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这边先给出制作样式：

这边想对每个按钮在点击的边框改变样式，用each和click的结合实现最好不过，上jquery代码：

     $("#filterMenu a").each(function () {
            //this.id = i;// 设置每个a标签的id为自增id
            //i++;
            $(this).click(function () {
                // 设置每个a标签的onclick事件
                //alert(this.id);
                if ($(this).hasClass("SwitchColor"))
                    $(this).removeClass("SwitchColor");
                else {
                    $("#filterMenu a").each(function () {


                        $(this).removeClass("SwitchColor");


                    });


                    $(this).addClass("SwitchColor");
                }
            });
        });

样式只要提供多一个SwitchColor为：

 .SwitchColor {
        
           outline: 1px solid #ff4400;
        
        }

其他的和之前写的第一篇css制作表格式按钮一样的html：

  <!--write filtMenu here-->
        <div id="filterMenu">
            <div class="content">
                <div class="filter Left">
            <a id="all" class="filterButton"><span>全部<span class="filterButtonNumber">(30)</span></span></a>
            <a id="bondType" class="filterButton"><span>债券型<span  class="filterButtonNumber">(30)</span></span></a>
             <a id="setToOpen"  class="filterButton"><span>定开债<span  class="filterButtonNumber">(30)</span></span></a>
            </div>
            <div class="filter Middle">
            <a id="stockType" class="filterButton "><span>股票型<span  class="filterButtonNumber">(30)</span></span></a>
            <a id="QDIIType" class="filterButton"><span>QDII<span  class="filterButtonNumber">(30)</span></span></a>
            </div>
            <div class="filter Right">
            <a id="hybridType" class="filterButton "><span>混合型<span  class="filterButtonNumber">(30)</span></span></a>
            <a id="breakevenType" class="filterButton"><span>保本型<span  class="filterButtonNumber">(30)</span></span></a>
            </div>
                </div>
        </div>