javascript - 为什么 classList.add 不适用于 html onClick

Question

我正在尝试创建一个动态日历。我的第一步是在单击时向某些元素添加类但是，我遇到了一个问题，classList.add('');不在 HTML 中工作。我不确定我可能做错了什么。

<ul class="days">
  <li onClick='#'>1<li>
  <li onclick="this.classList.add('active')">2</li>
  <li onClick='#'>3</li>
  <li onClick='#'>4</li>
  <li onClick='#'>5</li>
  <li onClick='#'>6</li>
  <li onClick='#'>7</li>
  <li onClick='#'>8</li>
  <li onClick='#'>9</li>
  <li onClick='#'><span class="active">10</span></li>
</ul>

CSS

  /* Highlight the "current" day */
   .days li .active {
      padding: 5px;
      background: #1abc9c;
      color: white 
   }

我正在尝试将 onclick 事件应用于数字 2。但是 classList.add('');不工作。我确定这是有原因的...任何帮助将不胜感激。

Answer 1

由于您的 CSS 规则或 DOM，它不起作用。

.days li .active在 <li> 的子节点上应用样式同类active , 但使用 this.classList.add('active') , 你添加类 active在 <li> 上标记和 CSS 规则应为 .days li.active .