如何制作交互式标签？

<div id="tag-container">
  <span class="tag">标签1</span>
  <span class="tag">标签2</span>
  <span class="tag">标签3</span>
</div>

.tag {
  display: inline-block;
  padding: 5px 10px;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

.tag:hover {
  background-color: #aaa;
}

.tag.active {
  background-color: #f00;
}

var tags = document.getElementsByClassName('tag');

for (var i = 0; i < tags.length; i++) {
  tags[i].addEventListener('click', function() {
    this.classList.toggle('active');
  });
}