一、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":"按钮三","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>
效果图：
二、jq如何实现？
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>刘晓慧</title> 6 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 7 <style type="text/css"> 8 li{ 9 list-style: none; 10 float: left; 11 margin-left: 5px; 12 background: yellow; 13 padding: 1px; 14 border-radius: 3px; 15 border:1px solid #999; 16 } 17 .active{ 18 color:red; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="example"> 24 <ul> 25 <li>按钮一</li> 26 <li>按钮二</li> 27 <li>按钮三</li> 28 <li>按钮四</li> 29 <li>按钮五</li> 30 <li>按钮六</li> 31 <li>按钮七</li> 32 <li>按钮八</li> 33 </ul> 34 </div> 35 </body> 36 </html> 37 <script type="text/javascript"> 38 $("li").click(function(){ 39 $("li").removeClass("active"); 40 $(this).addClass("active"); 41 }) 42 </script>
效果图：同上
三、原生js如何实现？
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style type="text/css"> 8 li{ 9 list-style: none; 10 float: left; 11 margin-left: 5px; 12 background: yellow; 13 padding: 1px; 14 border-radius: 3px; 15 border:1px solid #999; 16 } 17 .active{ 18 color:red; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div id="example"> 25 <ul> 26 <li>按钮一</li> 27 <li>按钮二</li> 28 <li>按钮三</li> 29 <li>按钮四</li> 30 <li>按钮五</li> 31 <li>按钮六</li> 32 <li>按钮七</li> 33 <li>按钮八</li> 34 </ul> 35 </div> 36 </body> 37 38 </html> 39 <script type="text/javascript"> 40 var buttons=document.getElementsByTagName("li"); 41 var l=buttons.length; 42 for(var i=0;i<l;i++){ 43 buttons[i].onclick=function(){ 44 for(var j=0;j<l;j++){ 45 if(this==buttons[j]){ 46 this.className="active"; 47 }else{ 48 buttons[j].className=""; 49 } 50 51 } 52 } 53 } 54 </script>
效果图：同上
代码2（hwt）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>练习</title> 5 <meta name="keywords" content="keyword1,keyword2,keyword3"> 6 <meta name="description" content="this is my page"> 7 <meta name="content-type" content="text/html; charset=UTF-8"> 8 </head> 9 <style> 10 .btn{background-color:yellow;} 11 </style> 12 <script type="text/javascript"> 13 function change(obj){ 14 var btn = document.querySelectorAll('.btn'); 15 for(var i=0;i<btn.length;i++){ 16 btn[i].style.color = "black"; 17 } 18 document.getElementById(obj).style.color = "red"; 19 } 20 </script> 21 <body> 22 <button type="button" value="" class="btn" onclick="change('a')" id="a">按钮一</button> 23 <button type="button" value="" class="btn" onclick="change('b')" id="b">按钮二</button> 24 <button type="button" value="" class="btn" onclick="change('c')" id="c">按钮三</button> 25 <button type="button" value="" class="btn" onclick="change('d')" id="d">按钮四</button> 26 <button type="button" value="" class="btn" onclick="change('e')" id="e">按钮五</button> 27 <button type="button" value="" class="btn" onclick="change('f')" id="f">按钮六</button> 28 <button type="button" value="" class="btn" onclick="change('g')" id="g">按钮七</button> 29 <button type="button" value="" class="btn" onclick="change('h')" id="h">按钮八</button> 30 </body> 31 </html>