导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）

佚名 6年前 (2019-04-11) 随笔 710人围观抢沙发百度已收录

一、vue如何实现？

代码：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）随笔第1张

 1 <!DOCTYPE html>  
 2 <html lang="en">  
 3   
 4     <head>  
 5         <meta charset="UTF-8">  
 6         <title>Title</title>  
 7         <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 
 8         <style type="text/css">
 9             li{
10                 list-style: none;
11                 float: left;
12                 margin-left: 5px;
13                 background: yellow;
14                 padding: 1px;
15                 border-radius: 3px;
16                 border:1px solid #999;
17             }
18             .active{
19                 color:red;
20             }
21         </style>
22     </head>  
23   
24     <body>  
25         <div id="example">  
26             <ul>
27                 <li v-bind:class=" activeClass==index ? 'active' : '' " v-for="(item,index) in list" @click="getItem(index)">{{item.name}}</li>
28             </ul>
29         </div>  
30         <script>  
31             var example1 = new Vue({  
32                 el: '#example',  
33                 data: {  
34                     activeClass: -1,  
35                     list:[
36                         {"typeId":"1","name":"按钮一","number":"50"},
37                         {"typeId":"2","name":"按钮二","number":"50"},
38                         {"typeId":"3","name":"按钮三","number":"50"},
39                         {"typeId":"4","name":"按钮四","number":"50"},
40                         {"typeId":"5","name":"按钮五","number":"50"},
41                         {"typeId":"6","name":"按钮六","number":"50"},
42                         {"typeId":"7","name":"按钮七","number":"50"},
43                         {"typeId":"8","name":"按钮八","number":"80"},
44                     ],
45                 },  
46                 watch: {  
47                      
48                 },
49                 methods: {
50                     getItem: function (index) {
51                        this.activeClass = index;
52                     }
53                 }  
54             })  
55         </script>  
56     </body>  
57   
58 </html>