javascript - 切换类不起作用

Question

我有这样的跨度:

<span class="read_more"> Read More </span>

还有一些这样的div:

<div class="tab_inner">
    .
    .
    .
    .
</div>

我怎样才能为他们切换一个类(active)

这是我的代码:

var showTab = document.getElementsByClassName("read_more");
var tabContent = document.getElementsByClassName("tab_inner");

function showTabContent(event) {
    for (var i = 0; i < showTab.length; i++) {
        showTab[i].addEventListener('click', function() {
            tabContent.toggle('active');
        });
    }
}

而且我无法通过 document.getElementsByClassName 获取 DOM 或函数中的 document.getElementsByTagName。只是 document.getElementById 在函数中工作。

我该怎么办？

Answer 1

您只能在单个元素上的 classList 上运行切换。我已经在下面修改了你的代码

var showTab = document.getElementsByClassName("read_more");
var tabContent = document.getElementsByClassName("tab_inner");

function showTabContent() {
  for (var i = 0; i < showTab.length; i++) {
    (function(index) {
      showTab[i].addEventListener('click', function() {
        tabContent[index].classList.toggle('active'); // I have assumed each read more has a corresponding tab content
      });
    })(i);
  }
}

showTabContent();

.tab_inner.active {
  color: red;
}

<div class="read_more">read more</div>
<div class="tab_inner">tab content</div>
<div class="read_more">read more</div>
<div class="tab_inner">tab content</div>