|  |  | 
 |  |  |   <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> | 
 |  |  |     #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> | 
 |  |  |  | 
 |  |  |   <!-- 主体内容 --> | 
 |  |  | 
 |  |  |   </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> | 
 |  |  |  |