在 Bootstrap 中单击时将卡片变灰

Question

无限列表的一个常用功能是，当我们点击他之后，该项目会变灰。只用HTML、CSS、JS、jQuery（用户端）能达到这个效果吗？

它是如何工作的？

1.) 用户点击卡片元素 2.) 当按下时，class text-muted 被添加到卡片元素，导致它变成灰色，如下所示

bootarap 中最简单的代码示例如下所示：

  {% for obj in objects %}
  <a href="/detail/id/" target="_blank">
    <div class="card" id="card{{ obj.id }}">
      <!--..content card..-->
    </div>
  </a>
  {% endfor %}

Answer 1

您可以添加 CSS 伪 class 到已访问的链接 a:visited { color: grey; }。没有自定义 class 和 javascript 逻辑。参见 doc

在 Bootstrap 中单击时将卡片变灰

Gray the card on click in Bootstrap

html

javascript

jquery

bootstrap-4