javascript - タブバニラJavaScript

Question

選択したクラスを「ブロック」のグループから削除できないという小さな問題が発生しています。各タブXをクリックすると、任意の「ブロック」要素の「選択された」クラスがクリアされ、クリックされたタブの「選択された」クラスが「選択された」クラスに適用されます。

「UncaughtTypeError：Undefinedのメソッド'remove'を呼び出せません」というエラーが表示され続けます。これがjsfiddleの例ですhttp://jsfiddle.net/kas187/r4HLd/1/

Answer 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/

またはこれ、 slice-methodが気に入らない場合：

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