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>