如何给父元素添加类答案

【问题标题】：How to add a class to the parent element如何给父元素添加类
【发布时间】：2023-02-21 23:00:30
【问题描述】：

我有 li，其中包含 a。当我单击 a 时，会发生一些操作并添加活动类。

我需要在单击a 时，为li 添加活动类。现在我的代码不起作用，也没有添加任何类。如何才能做到这一点？

$('a').click(function() {
  $('a').removeClass('active');
  $(this).addClass('active');
  $(this).parent().addClass('active');
});

li.active { border: 1px solid rebeccapurple }
a.active { color: red; }

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

【问题讨论】：

实际上，您的代码可以从文档中的任何锚点中删除 active 类，并将其添加回当前单击的锚点及其 li 父级。问题是：为什么你的主播没有内容？你为什么不为你的列表项使用父级<ul>/<ol>？为什么不为具有 active 类的元素设置样式，以便您可以看到何时应用它？
不添加任何类- 这仅仅是因为您缺少该课程的样式吗？编辑我已将 css 添加到您的 sn-p，以便您可以看到它工作正常。如果它不适合您的实际情况，请更新 sn-p 以提供代码证明了问题.见minimal reproducible example。
不添加任何类- 因为它是一个<a>，你的代码（不是sn-p）有一个href=吗？可能是您的页面正在导航/重新加载，以便您的课程被重置。

标签： jquery

【解决方案1】：

看来您的代码或多或少有效

也许这就是你想要的

$('a').click(function() {
  $('a').removeClass('active');
  $('a').parent().removeClass('active');
  $(this).addClass('active');
  $(this).parent().addClass('active');
});

a.active {
  background-color: yellow
}

li.active {
  background-color: red
}

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

请注意，如果 a 导航到也有此导航的其他地方，除非您使用 localStorage，否则它将不会保留该类。

如果你想阻止它导航，你可以添加

$('a').click(function(e) {
  e.preventDefault();

【讨论】：

【解决方案2】：

看起来你有一个有效的代码，我做到了并且一切正常：

$('a').click(function(e) {
  e.preventDefault();
  $('a').removeClass('active');
  $('li').removeClass('active');
  $(this).addClass('active');
  $(this).parent().addClass('active');
});

li.active {
  border: 1px solid rebeccapurple
}

a.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="active">Link</a>
  </li>
  <li>
    <a>Link</a>
  </li>
</ul>

【讨论】：