为什么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') ，您可以在<li>标记上添加active类，CSS规则应该是.days li.active 。

Answer 2

您的css选择器错误，您需要删除li和.active之间的.active

喜欢

.days li.active {
  padding: 5px;
  background: '#1abc9c';
  color: white 
}

Answer 3

首先，你的第一个li元素的html是错误的。

其次我认为你可能被你的css选择器误导了，因为第10个li元素有一个内部跨度而第二个没有。 看看这个小提琴

https://jsfiddle.net/h6w7kaoy/1/

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：

li.active, li span.active {
  color: blue;
  font-weight: bold;
}

如果您尝试从css选择器中删除li.active ，您将看到单击li元素不会影响视觉效果（但仍在添加类;-)）

Answer 4

问题不classList问题是选择器。 .days li .active将选择所有具有类active的元素，这些元素位于<li> ， li位于具有类.days元素内。 不应该有任何空间b / w li和.active

.days li.active