| <!DOCTYPE html> | 
| <html lang="en"> | 
| <head> | 
|     <meta charset="UTF-8"> | 
|     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> | 
|     <title>WMS</title> | 
|     <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> | 
|     <link rel="icon" type="image/x-icon" href="../../static/image/logo1.png" /> | 
|     <style> | 
|         * { | 
|             margin: 0; | 
|             padding: 0; | 
|             box-sizing: border-box; | 
|             -webkit-box-sizing: border-box; | 
|             -moz-box-sizing: border-box; | 
|         } | 
|         html { | 
|             height: 100%; | 
|             /*line-height: 1.5;*/ | 
|         } | 
|         body { | 
|             height: 100%; | 
|             /*overflow: hidden;*/ | 
|         } | 
|   | 
|         /* 导航 */ | 
|         .nav { | 
|             background-color: #fff; | 
|             color: #000; | 
|             list-style-type: none; | 
|             position: fixed; | 
|             width: 100%; | 
|             overflow: hidden; | 
|             box-shadow: 0 1px 2px 0 rgba(0,0,0,.1) | 
|         } | 
|         .nav li { | 
|             float: left; | 
|             border-right: 1px solid #f1f1f1; | 
|         } | 
|         .nav li a { | 
|             font-size: 15px; | 
|             letter-spacing: 1px; | 
|             display: block; | 
|             text-decoration: none; | 
|             padding: 3px 10px; | 
|             text-align: center; | 
|             /*transform:scale(1.5);*/ | 
|             /*-webkit-transform:scale(1.5);*/ | 
|             /*-moz-transform:scale(1.5);*/ | 
|         } | 
|         .nav li a:hover { | 
|             color: #000; | 
|         } | 
|         .nav-unselect { | 
|             color: #666; | 
|         } | 
|         .nav-select { | 
|             background-color: #f1f1f1; | 
|             color: #000; | 
|         } | 
|   | 
|         /* 主体 */ | 
|         #content { | 
|             padding-top: 26px; | 
|             width: 100%; | 
|             height: 100%; | 
|         } | 
|         iframe { | 
|             border-width: 0; | 
|         } | 
|     </style> | 
| </head> | 
| <body> | 
|   | 
| <!-- 导航栏 --> | 
| <ul class="nav"> | 
|     <li><a id="pakin" onclick="nav(this.id)" class="nav-select" href="#">入库</a></li> | 
| <!--    <li><a id="pakout" onclick="nav(this.id)" class="nav-unselect" href="#">出库</a></li>--> | 
|     <li><a id="stockOut" onclick="nav(this.id)" class="nav-unselect" href="#">拣货</a></li> | 
|     <li><a id="stockCheck" onclick="nav(this.id)" class="nav-unselect" href="#">盘点</a></li> | 
|     <li><a id="comb" onclick="nav(this.id)" class="nav-unselect" href="#">组托</a></li> | 
|     <li><a id="stockIn" onclick="nav(this.id)" class="nav-unselect" href="#">上架</a></li> | 
|     <li><a id="stockSearch" onclick="nav(this.id)" class="nav-unselect" href="#">库存</a></li> | 
| </ul> | 
|   | 
| <!-- 主体内容 --> | 
| <iframe id="content" src="pakin.html"></iframe> | 
|   | 
| </body> | 
| <script> | 
|     // 导航栏 | 
|     function nav(id) { | 
|         $('.nav-select').attr("class", "nav-unselect"); | 
|         $('#'+id).attr("class", "nav-select"); | 
|         $('#content').attr("src", id+".html"); | 
|     } | 
| </script> | 
| </html> |