点击导航栏按钮切换按钮背景色_导航栏按钮图标素材

liuian 2025-09-09 04:34 19 浏览

解决点击导航栏点击哪个，哪个就高亮变色，其他恢复原状。

这里我用的是vue框架和element ui组件库写的。主要就是一个点击事件和一个for循环。

HTML

  <div id="app">
    <!-- 导航栏 -->
    <div id="nav">
      <router-link 
	      @click.native="dianji(index)" 
	      :class="{ clk: index == dynamic }"
	      v-for="(item, index) in navArr" 
	      :key="index" 
	      :to="item.path">
	      {{ item.content }}
      </router-link>
    </div>
    <router-view />
  </div>

@click.native和@click差不多，但是router-link会阻止click事件，所有加一个native就可以了。

<script>
export default {
  name: "app",
  data() {
    return {
      // 导航按钮数组
      navArr: [
        { path: "/one", content: "第一个按钮" },
        { path: "/two", content: "第二个按钮" },
        { path: "/three", content: "第三个按钮" },
        { path: "/four", content: "第四个按钮" },
      ],
      dynamic:0, //默认第一个
    };
  },
  methods: {
    // 点击切换导航栏背景色
    dianji: function (index) {
      this.dynamic = index;
    },
  },
};
</script>

css这里我就不写了，就几行代码。