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

weixin_34186128

于 2019-04-11 11:25:00 发布

阅读量3.7k

点赞数 5

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dancer0321/p/10688568.html

版权

一、vue如何实现？

代码：

 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":"按钮

最低0.47元/天解锁文章

weixin_34186128

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）...

一、vue如何实现？代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7...
复制链接

扫一扫