tabs vanilla javascript

tabs vanilla javascript

本文关键字：javascript vanilla tabs      更新时间：2023-09-26

我遇到了一个小问题，无法从"块"组中删除所选类。当我单击每个选项卡 X 时，它应该清除任何"块"元素上的"选定"类并应用然后将"选定"类应用于单击的选项卡的父节点。

我不断收到错误，"未捕获的类型错误：无法调用未定义的方法'删除'"。下面是 jsfiddle http://jsfiddle.net/kas187/r4HLd/1/中的一个例子

尝试：

window.addEventListener('DOMContentLoaded', function() {
    Array.prototype.slice.call(document.querySelectorAll('.block .tab')).forEach(function (el) {
        el.addEventListener('click', function() {
            document.querySelector('.block.selected').classList.remove('selected');
            this.parentNode.classList.add('selected');
        }, false);
    });
}, false);​

演示：http://jsfiddle.net/QGZvN/3/

或者这个，如果你不喜欢切片方法：

// inside the for-block
tabbedblocks[i].querySelector('.tab').addEventListener('click', function() {
  document.querySelector('.block.selected').classList.remove('selected');
  this.parentNode.classList.add('selected');
}, false);
相关文章：