vue通过router.push跳转 怎么添加Class来改变点击选中的效果
顶部一个nav导航组件，点击一次跳转页面，然后nav上的被点击项添加类名。例如从某一页面点击E，跳转到E页面同时添加类名。nav中的每个item是v-for出来的
正在回答
同学你好， 根据你的代码， 可以结合老师前两次给你的思路修改
1、在navbar组件中， 通过在点击事件传入对应的index值
2、在changePage_Color中， 通过传入的index值， 判断需要跳转到那个页面， 通过query属性传递参数给父组件
3、在父组件中通过this.$route.query获取传递的参数， 然后在通知子组件当前显示的哪一个页面
4、 子组件中通过props接收父组件传递的消息，修改current值， 让当前选项卡添加类名focus，字体变红色
最后实现如下所示
同学可以结合示例代码修改一下自己代码，要灵活运用所学知识， 在编写代码的过程中需要仔细一点哦
如果帮助到了你， 欢迎采纳~~~
祝学习愉快~~~
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <template> <div> <ul> <li v-for="(item, index) in list" :key="index" :value="index" :class="{focus: index === current}" @click="changePage_Color" >{{item}}</li> </ul> </div></template><script>export default { name: 'NavBar', data () { return { list: ['A', 'B', 'C', 'D', 'E', 'F'], current: '' } }, mothods: { changePage (e) { this.color(e) this.page(e) }, color (e) { this.current = e.target.value }, page (e) { if (e.target.innerText === 'A') { this.$router.push('/a') } if (e.target.innerText === 'B') { this.$router.push('/b') } } }}</script><style scoped> ul { width: 500px; border: 1px solid red; padding: 5px; display: flex; justify-content: space-between; } li { margin: 5px; border: 1px solid #000; font-size: 30px; cursor: pointer; } .focus { color: red; }</style> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <div> <nav-bar/> <div class="content">A页面</div> </div></template><script>import NavBar from './navbar'export default { name: 'APage', components: { NavBar }}</script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <div> <nav-bar/> <div class="content">B页面</div> </div></template><script>import NavBar from './navbar'export default { name: 'BPage', components: { NavBar }}</script> |
同学你好， 请问你这里是想实现类似tab切换的效果吗? 如果是这样的话， 老师这里给你提供一个简单的思路
1、 通过动态的设置class值，判断index与isActive值是否相等，为选项卡添加active类名。
2、定义一个变量isActive,默认是0，第一个选项卡添加类名active
3、 在nav上绑定点击事件，将index值传入，在点击的时候修改isActive的值，让被点击的选项卡拥有active这个类名， 示例：
同学可以自己下去测试一下哦
如果同学不是指这里， 建议： 可以详细的描述一下指的是哪里， 再次提问， 我们会继续为你解答的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧