点击导航栏按钮切换按钮背景致
处理点击导航栏点击哪个，哪个就高亮变色，其他恢复原状。
这里我用的是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这里我就不写了，就几行代码。
后果图
没了，完毕了，是不是很简便呐，如有成绩，接待留言。
假云云篇博文对您有协助，还请动动小手点赞 保藏 ?留言 呐~，谢谢 ~ ~
