1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 6 <title>端API</title> 7 <link rel="stylesheet" type="text/css" href="../css/api.css"/> 8 <link rel="stylesheet" type="text/css" href="../css/style.css"/> 9 <style> 10 header{ 11 height:30px; 12 } 13 .order{ 14 position:absolute; 15 bottom:0px; 16 left:0px; 17 width:60px; 18 height:20px; 19 padding-top:10px; 20 text-align:center; 21 22 } 23 nav{ 24 display: -webkit-box; 25 display: -webkit-flex; 26 display: box; 27 -webkit-box-orient: horizontal; 28 -webkit-flex-flow: row; 29 flex-flow: row; 30 position:relative; 31 width:100%; 32 height:56px; 33 background-color:#ffffff; 34 } 35 .nav-item{ 36 padding-top:20px; 37 -webkit-box-flex: 1; 38 -webkit-flex: 1; 39 flex: 1; 40 border-bottom: 1px solid #f3f3f3; 41 text-align:center; 42 color:#afafaf; 43 } 44 .active{ color: #000000; } 45 .nav-item-bar{ 46 height:5px; 47 width:60%; 48 margin:0 auto; 49 50 } 51 .nav-item-text{ 52 text-align: center; 53 margin-bottom: 14px; 54 55 } 56 .bar-active{ 57 background-color:#ffd442; 58 } 59 </style> 60 </head> 61 <body> 62 <div> 63 <header> 64 <div class="order">订单</div> 65 </header> 66 <nav id="nav"> 67 <div tapmode="hover" name="nav-item" class="nav-item active" onclick="randomSwitchBtn( this );"> 68 <div class="nav-item-text ">全部订单</div> 69 <div class="nav-item-bar bar-active"></div> 70 </div> 71 <div tapmode="hover" name="nav-item" class="nav-item" onclick="randomSwitchBtn( this );"> 72 <div class="nav-item-text">待评价</div> 73 <div class="nav-item-bar"></div> 74 </div> 75 76 </nav> 77 78 </div> 79 </body> 80 <script type="text/javascript" src="../script/api.js"></script> 81 <script type="text/javascript"> 82 function randomSwitchBtn( tag ) { 83 84 if( tag == $api.dom('.nav-item.active') )return; 85 var eLis = $api.domAll('.nav-item'), 86 index = 0; 87 for (var i = 0,len = eLis.length; i < len; i++) { 88 if( tag == eLis[i] ){ 89 index = i; 90 }else{ 91 $api.removeCls(eLis[i], 'active'); 92 $api.removeCls(eLis[i].childNodes[3], 'bar-active'); 93 } 94 } 95 $api.addCls( eLis[index], 'active'); 96 $api.addCls(eLis[index].childNodes[3], 'bar-active'); 97 //api.setFrameGroupIndex({ 98 // name: 'group', 99 //index: index 100 //}); 101 } 102 </script> 103 </html>
