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

这里我用的是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就可以了。

JS

<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这里我就不写了，就几行代码。

效果图

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点赞 收藏 ⭐留言 呐~，谢谢 ~ ~