删除包含 javascript 的容器中的所有 类

Removing all classes in a container with javascript

我正在尝试删除父元素中的所有 classes,结构如下所示

<div id="middleCol">
  <section class="toggleSection" id="step1" v-on:click="toggleStep($event)" ref="step1">
    <small>Step 1</small>
    <h5>Flight Details</h5>
  </section>

  <section class="toggleSection"  id="step2" v-on:click="toggleStep($event)" ref="step2">
    <small>Step 2</small>
    <h5>Traveler Info</h5>
  </section>

  <section class="toggleSection"  id="step3" v-on:click="toggleStep($event)" ref="step3" >
    <small>Step 3</small>
    <h5>Payment</h5>
  </section>
</div>

基本上这些是选项卡,我只想一次将一个活动 class 应用于一个 div,我的计划是删除所有 class 然后添加活动 class 到使用事件单击的任何选项卡,但我收到一个错误,即其他子元素上的 className 属性 不存在,该函数用于添加 class 只是不删除它们,我已经看到了一些 jquery 解决方案,但我希望找到一个普通的解决方案

感谢任何帮助:)

这是我正在尝试使用的功能

function toggleActive(event){
  let element = event.currentTarget
  let parent = element.parentNode.children;
  console.log(element)
  console.log(parent)
           
  for (let child in parent){
    parent[child.value].className = ''
  }
  element.classList.add("toggleSectionActive");
}

尝试绑定 class 并对部分使用 v-for:

new Vue({
  el: '#demo',
  data(){
    return {
      toggled: 0,
      sections: [
        {id: 0, name: 'Step 1', desc: 'Flight Details'},
        {id: 1, name: 'Step 2', desc: 'Traveler Info'},
        {id: 2, name: 'Step 3', desc: 'Payment'}
      ]
    }
  },
  methods: {
    toggleStep(id){
      this.toggled = id
    }
  }
})
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div id="middleCol">
    <section :class="section.id === toggled && 'active'" v-for="section in sections" :key="section.id" @click="toggleStep(section.id)">
      <small>{{ section.name }}</small>
      <h5>{{ section.desc }}</h5>
    </section>
  </div>
</div>