选择html元素时如何添加类[重复]

Posted 2023-03-05

【中文标题】选择html元素时如何添加类[重复]

【英文标题】：how to add a class when an html element is selected [duplicate]

【发布时间】：2020-05-10 09:14:01

【问题描述】：

我的应用程序有几个按钮（比如 b1、b2、b3），我将它们用作导航菜单项（替代使用 <a>）。我想在单击/选择按钮时更改按钮的颜色。当单击特定按钮（例如 b1）时，其颜色应更改为 red 并且所有 b2、b3 应具有颜色 grey。当b2 被选中时，它应该是红色的并且b1 应该切换回grey。有没有办法使用css 和pseudo 元素（类似于:hover）来做到这一点？

【问题讨论】：

很确定这仅使用 css 是不可能的。你需要 javascript 来做到这一点。

这能回答你的问题吗？ How to keep :active css style after click a button

【参考方案1】：

一个好的策略是创建一个类isClicked，它具有被点击元素的样式，并在每次点击元素时切换，比如：

我使用 jquery 来展示它背后的逻辑 :D

$('div').click(function()  
  $('div.isClicked').toggleClass('isClicked')
  $(this).toggleClass('isClicked')
)

div 
  width: 100px;
  margin:10px auto;
  cursor: pointer;
  text-align:center;
  
  background-color:grey;


div.isClicked 
  background-color:red !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>A</div>
<div>B</div>
<div>C</div>

【讨论】：

这个问题没有被标记为jQuery那么你为什么要使用它？

@volt 仅使用标记语言是不可能的，因此引入任意第三个选项并没有任何危害。

我理解并同意@TylerH，但是如果可以使用 vanilla JS，为什么要为此加载 jQuery？

@volt 可能是因为 Kristian 更喜欢 jQuery。或者因为它在香草 JS 中更复杂。或者其他什么原因。任君挑选。