|  |  | 
 |  |  |   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> | 
 |  |  |   <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"> | 
 |  |  |   <link rel="stylesheet" type="text/css" href="../static/css/common.css"> | 
 |  |  |   <link rel="stylesheet" type="text/css" href="../static/css/index.css"> | 
 |  |  |   <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> | 
 |  |  |   <script type="text/javascript" src="../static/js/common.js"></script> | 
 |  |  |   <style> | 
 |  |  |     /* 导航 */ | 
 |  |  |     .nav { | 
 |  |  |       background-color: #333; | 
 |  |  |       list-style-type: none; | 
 |  |  |       position: fixed; | 
 |  |  |       width: 100%; | 
 |  |  |       overflow: hidden; | 
 |  |  |     } | 
 |  |  |     .nav li { | 
 |  |  |       float: left; | 
 |  |  |     } | 
 |  |  |     .nav li a { | 
 |  |  |       display: block; | 
 |  |  |       text-decoration: none; | 
 |  |  |       padding: 12px 16px; | 
 |  |  |       text-align: center; | 
 |  |  |     } | 
 |  |  |     .nav li a:hover { | 
 |  |  |       color: #fff; | 
 |  |  |     } | 
 |  |  |     .nav li.right { | 
 |  |  |       float: right; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .nav-unselect { | 
 |  |  |       color: rgba(255,255,255,.7); | 
 |  |  |     } | 
 |  |  |     .nav-select { | 
 |  |  |       background-color: #a62d2d; | 
 |  |  |       color: #fff; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     #content { | 
 |  |  |       box-sizing: border-box; | 
 |  |  |       padding-top: 46px; | 
 |  |  |       width: 100%; | 
 |  |  |       height: 100%; | 
 |  |  |     } | 
 |  |  |   </style> | 
 |  |  | </head> | 
 |  |  | <body> | 
 |  |  |   <!-- 导航栏 --> | 
 |  |  |   <ul class="nav"> | 
 |  |  |     <li><a id="stock" onclick="nav(this.id)" class="nav-select" href="#">导航一</a></li> | 
 |  |  |     <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">导航二</a></li> | 
 |  |  |     <li><a id="led" onclick="nav(this.id)" class="nav-unselect" href="#">导航三</a></li> | 
 |  |  |     <li class="right"><a id="about" class="nav-unselect" onclick="nav(this.id)" href="#">关于</a></li> | 
 |  |  |     <li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">主控图</a></li> | 
 |  |  |     <li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">输送设备</a></li> | 
 |  |  |     <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">堆垛机</a></li> | 
 |  |  |     <li class="right"><a id="about" class="nav-unselect" onclick="logout()" href="#">注销</a></li> | 
 |  |  |   </ul> | 
 |  |  |  | 
 |  |  |   <iframe id="content" src="stock.html"></iframe> | 
 |  |  |   <!-- 主体内容 --> | 
 |  |  |   <iframe id="content" src="console.html"></iframe> | 
 |  |  |  | 
 |  |  |   <footer class="footer"> | 
 |  |  |     Copyright © 2015 All Rights Reserved. <a href="http://www.zoneyung.com" target="_blank">浙江中扬物流装备有限公司</a>  保留所有权利 | 
 |  |  |   </footer> | 
 |  |  | </body> | 
 |  |  | <script> | 
 |  |  |   // 导航栏 | 
 |  |  |   function nav(id) { | 
 |  |  |       $('.nav-select').attr("class", "nav-unselect"); | 
 |  |  |       $('#'+id).attr("class", "nav-select"); | 
 |  |  |       $('#content').attr("src", id+".html"); | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   // 注销 | 
 |  |  |   function logout() { | 
 |  |  |       localStorage.removeItem("token"); | 
 |  |  |       window.location.href = baseUrl + "/login"; | 
 |  |  |   } | 
 |  |  | </script> | 
 |  |  | </html> | 
 |  |  |  |