解决点击导航栏点击哪个，哪个就高亮变色，其他恢复原状。
这里我用的是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这里我就不写了，就几行代码。
效果图
没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点赞 收藏 ⭐留言 呐~，谢谢 ~ ~
版权声明：本文内容由网友提供，该文观点仅代表作者本人。本站（http://www.zengtui.com/）仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 3933150@qq.com 举报，一经查实，本站将立刻删除。
版权声明：本文内容由作者小航提供，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至907991599@qq.com 举报，一经查实，本站将立刻删除。如若转载，请注明出处：http://www.hangzai.com/434690.html
