js实现切换导航 

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     }

 

posted @ 2017-07-18 13:43  rrranmo  阅读(777)  评论(0)    收藏  举报