APICloud学习笔记之菜单切换

  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>

相关阅读:
Bootstrap4（28）：滚动监听(Scrollspy)
Bootstrap4（27）：弹出框
 Bootstrap4（26）：提示框
 Bootstrap4（25）：模态框
 Bootstrap4（24）：轮播
 Bootstrap4（23）：自定义表单
 Bootstrap4（22）：输入框组
 Bootstrap4（21）：表单控件
 Bootstrap4（20）：表单
 Bootstrap4（19）：面包屑导航（Breadcrumb）
原文地址：https://www.cnblogs.com/wuhailong/p/6780614.html