js实现切换导航

最新推荐文章于 2025-05-27 08:43:37 发布

weixin_34233679

最新推荐文章于 2025-05-27 08:43:37 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/summer0319/p/7200079.html

本文介绍了一种使用Vue.js实现的导航栏切换效果。通过点击不同的导航项，可以实现选中状态的变化，并且在选中项下方显示一条高亮线条以增强视觉效果。文章提供了完整的代码示例，包括HTML结构、CSS样式以及Vue.js的交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1             toggleNav(event){
2                 if($(event.target)[0].className!='selected'){
3                     $(event.target)[0].className='selected';
4                     $($(event.target)[0]).siblings('li')[0].className='';
5                 }
6             },

1     .nav
2         ul
3             li.selected(@click="toggleNav") 邀请人 
4                 b
5             li(@click="toggleNav") 被邀请人
6                 b

 1     .nav {
 2         ul {
 3             display: flex;
 4             width: 100%;
 5             z-index: 999;
 6             height: 100px;
 7             li {
 8                 text-align: center;
 9                 flex:1;
10                 border-bottom:1px solid #333;
11                 z-index: 999;
12 
13                 &.selected {
14                     position: relative;
15                     b {
16                         display: block;
17                         margin: 0 auto;
18                         width: 200px;
19                         height: 8px;
20                         background-color: #999;
21                         position: absolute;
22                         bottom: 0;
23                         left: 80px;
24                         // border-bottom: 8px solid #999;
25                     }
26                 }
27             }
28         }
29     }