<code>
   &lt;!doctype html&gt;
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
   <script>
      $(document).ready(function() {
        $(".filter-button").click(function() {
          var value = $(this).attr('data-filter');
          if (value == "all") {
            $('.filter').show("1000");
          } else {
            $(".filter").not('.' + value).hide("3000");
            $('.filter').filter('.' + value).show("3000");
          }
        });
        $(".filter-button[data-filter='all']").trigger("click");
      });
   </script>
</code>
<style>
   .filter {<br />
   display: none;<br />
   }<br />
   .filter.show {<br />
   display: block;<br />
   }<br />
</style>
&lt;
<div class="container">
   <h2>使用 data-filter 属性筛选元素（默认显示所有元素）</h2>
   <div class="btn-group"><button class="btn btn-primary filter-button" data-filter="all">全部</button>
      <button class="btn btn-primary filter-button" data-filter="red">红色</button>
      <button class="btn btn-primary filter-button" data-filter="blue">蓝色</button>
      <button class="btn btn-primary filter-button" data-filter="green">绿色</button>
   </div>
   <div class="row mt-3">
      <div class="col-sm-4 filter red">
         这是一个红色的元素。
      </div>
      <div class="col-sm-4 filter blue">
         这是一个蓝色的元素。
      </div>
      <div class="col-sm-4 filter green">
         这是一个绿色的元素。
      </div>
      <div class="col-sm-4 filter red">
         这是另一个红色的元素。
      </div>
      <div class="col-sm-4 filter blue">
         这是另一个蓝色的元素。
      </div>
      <div class="col-sm-4 filter green">
         这是另一个绿色的元素。
      </div>
   </div>
</div>
&nbsp;