Javascript 如何设置活动选项卡的样式？

我有一个父组件（Vue）和子组件

我有几个元素可以通过更改当前数据在组件之间切换

问题是我不知道如何标记活动选项卡

我做了很多事情，在更新、之前更新、挂载、创建、之前创建的生命挂钩之间切换。但什么都没用

这段代码只在初始加载时有效（即“Home”），我希望它只对激活的代码进行样式设置，而不做其他任何事情。但不幸的是，它没有起作用

大多数情况下，它要么工作，但样式所有访问的链接，要么根本不工作，或者在最初的活动选项卡上工作（如此）

父组件的重要代码部分：

<template>
  <div id="grid">
    <nav id="navbar">

      <ul id="nav">
        <a href="#" class="Home" @click="current = 'Home'" ><li>{{navbar.Home}}</li></a>        
        <a href="#" class="Reservation" @click="current = 'Reservation'" ><li>{{navbar.Reservation}}</li></a>
        <a href="#" class="About-us" @click="current = 'About-us'" ><li>{{navbar.About}}</li></a>
        <a href="#" class="Contact" @click="current = 'Contact'" ><li>{{navbar.Contact}}</li></a>
      </ul>

      <div class="button"> <!-- Make some animation of this button becomes an extendable window of singing up. Don't forget  -->
        <a href="#">Sign Up
        </a>
      </div>
      <img src="https://i.pinimg.com/564x/8b/fa/5d/8bfa5d6a52a03e83b995fec69a4d8c2c.jpg" alt="" id="logo">
    </nav>      

    <main id="content"> 
      <keep-alive>
        <transition name="component-fade" mode="out-in">
          <component v-bind:is="current"></component>    
        </transition> 
      </keep-alive>          
    </main>      

    <footer>
      <p>Copyright © All Rights Reserved</p>
    </footer>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Aboutus from "./components/About us.vue";
import Contact from "./components/Contact.vue";
import Reservation from "./components/Reservation.vue";
import Signup from "./components/Signup.vue";

export default {
  components: {
    Home: Home,
    "About-us": Aboutus,
    Contact: Contact,
    Reservation: Reservation,
    Signup: Signup
  },
  data() {
    return {
      navbar: {
        Home: "Home",
        Reservation: "Reservation",
        About: "About us",
        Contact: "Contact"
      },
      current: "Home"
    };
  },
  mounted: function() {
    let actie = document.querySelector("." + this.current);
    actie.className = "active";
  },
  beforeUpdate: function() {
    let actie = document.querySelector("." + this.current);
    actie.className = "none";
  },
  methods: {}
};    

</script>

版权所有©保留所有权利

从“/components/Home.vue”导入主页；
从“/components/About us.vue”导入Aboutus；
从“/components/Contact.vue”导入联系人；
从“/components/Reservation.vue”导入保留；
从“/components/Signup.vue”导入注册；
导出默认值{
组成部分：{
家：家，
“关于我们”：关于我们，
联系人：联系人，
预约：预约，
注册：注册
},
数据（）{
返回{
导航栏：{
家：“家”，
预订：“预订”，
关于：“关于我们”，
联系人：“联系人”
},
当前：“家”
};
},
挂载：函数（）{
让actie=document.querySelector（“.”+this.current）；
actie.className=“活动”；
},
更新之前：函数（）{
让actie=document.querySelector（“.”+this.current）；
actie.className=“无”；
},
方法：{}
};    

我不是Vuejs方面的专家，但在这个Vuejs.org网站上遇到了一个示例，请参见CSS样式，这可能就是您要寻找的

请参见此处的示例：

希望这有帮助

<h2 id="Dynamic-Components"><a href="#Dynamic-Components" class="headerlink" title="Dynamic Components"></a>Dynamic Components</h2><p>Sometimes, it’s useful to dynamically switch between components, like in a tabbed interface:</p>

<div id="dynamic-component-demo" class="demo">
  <button v-for="tab in tabs" v-bind:key="tab" class="dynamic-component-demo-tab-button" v-bind:class="{ 'dynamic-component-demo-tab-button-active': tab === currentTab }" v-on:click="currentTab = tab">
    {{ tab }}
  </button>
  <component v-bind:is="currentTabComponent" class="dynamic-component-demo-tab"></component>
</div>
<script>
Vue.component('tab-home', { template: '<div>Home component</div>' })
Vue.component('tab-posts', { template: '<div>Posts component</div>' })
Vue.component('tab-archive', { template: '<div>Archive component</div>' })
new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Home',
    tabs: ['Home', 'Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})
</script>
<style>
.dynamic-component-demo-tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.dynamic-component-demo-tab-button:hover {
  background: #e0e0e0;
}
.dynamic-component-demo-tab-button-active {
  background: #e0e0e0;
}
.dynamic-component-demo-tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

动态组件有时，在组件之间动态切换很有用，比如在选项卡式界面中：

{{tab}}
组件（'tab-home'，{template:'home component'}）
组件（'tab-posts'，{template:'posts-component'}）
组件（'tab-archive'，{template:'archive component'}）
新Vue({
el:“#动态组件演示”，
数据：{
currentTab:'主页'，
选项卡：[“主页”、“帖子”、“存档”]
},
计算：{
currentTabComponent:函数（）{
返回'tab-'+this.currentTab.toLowerCase（）
}
}
})
.动态组件演示选项卡按钮{
填充：6px 10px；
边框左上半径：3px；
边框右上角半径：3px；
边框：1px实心#ccc；
光标：指针；
背景：#f0；
边缘底部：-1px；
右边距：-1px；
}
.动态组件演示选项卡按钮：悬停{
背景：#e0；
}
.动态组件演示选项卡按钮处于活动状态{
背景：#e0；
}
.动态组件演示选项卡{
边框：1px实心#ccc；
填充：10px；
}

一切正常。问题是您正在直接更改DOM，而Vue不知道您正在这样做。因为Vue拥有自己的虚拟DOM。因此，您可以尝试此方法，或在Vue指南中阅读有关动态类绑定的更多信息：

<ul id="nav">
  <a
    href="#"
    class="['Home', current === 'Home' ? 'active' : '']"
    @click="current = 'Home'"
  >
    <li>{{navbar.Home}}</li>
  </a>        
  <a
    href="#"
    class="['Reservation', current === 'Reservation' ? 'active' : '']"
    @click="current = 'Reservation'"
  >
    <li>{{navbar.Reservation}}</li>
  </a>
  <a
    href="#"
    class="['About-us, current === 'About-us' ? 'active' : '']"
    @click="current = 'About-us'"
  >
    <li>{{navbar.About}}</li>
  </a>
  <a
    href="#"
    class="['Contact', current === 'Home' ? 'active' : '']"
    @click="current = 'Contact'"
  >
    <li>{{navbar.Contact}}</li>
  </a>
</ul>

现在只需卸下已安装和更新前挂钩

---

PS：您应该使用按钮元素进行导航。由于更好的语义/可访问性。将

a

与

li

一起使用现在是不推荐使用的/反模式。

找到了这把小提琴，这对您有帮助吗？在每个li上放置v-bind:class=“current=='Home'？'active:''，并为li添加css。active@NickM我完全忘了v-bind，谢谢@谢谢你！