在 Bootstrap 中单击时将卡片变灰

Posted 2023-03-05

【中文标题】在 Bootstrap 中单击时将卡片变灰

【英文标题】：Gray the card on click in Bootstrap

【发布时间】：2021-12-12 20:59:59

【问题描述】：

无限列表中的一个常见功能是，当我们点击他后，该项目将变灰。我们可以只用 html、CSS、JS、jQuery（在用户端）来获得这种效果吗？

它是如何工作的？

1.) 用户点击卡片元素 2.）按下时，类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 %

【问题讨论】：

我不明白这个问题，你说的是事件点击添加类的解决方案。

类会被添加和改变，但是重新加载页面会忘记这个类，我们再次在所有卡片中只有初始状态

唯一的方法是使用localStorage并且存储卡的id需要是灰色的，然后在加载页面将类添加到元素到localStorage。

你可以给访问的链接添加css样式a:visited color: grey;

@VitaliyRayets 是的，我的方法不是唯一的 :)

【参考方案1】：

您只需将 CSS 伪类添加到已访问的链接 a:visited color: grey; 。没有自定义类和 javascript 逻辑。 见doc

【讨论】：

简单快速，这正是我所需要的。谢谢！