| | |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <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"> |
|---|
| | | <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> |
|---|
| | | /* 统一处理 */ |
|---|
| | | *, *::before, *::after { |
|---|
| | | -webkit-box-sizing: border-box; |
|---|
| | | box-sizing: border-box; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | /* 导航 */ |
|---|
| | | .nav { |
|---|
| | | background-color: #333; |
|---|
| | | list-style-type: none; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | html { |
|---|
| | | line-height: 1.5; |
|---|
| | | font-size: 15px; |
|---|
| | | .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 { |
|---|
| | | background-color: #fd5830; |
|---|
| | | .nav-unselect { |
|---|
| | | color: rgba(255,255,255,.7); |
|---|
| | | } |
|---|
| | | .nav ul li { |
|---|
| | | list-style-type: none; |
|---|
| | | .nav-select { |
|---|
| | | background-color: #a62d2d; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #content { |
|---|
| | | box-sizing: border-box; |
|---|
| | | padding-top: 46px; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div class="nav"> |
|---|
| | | <ul> |
|---|
| | | <li>导航一</li> |
|---|
| | | <li>导航二</li> |
|---|
| | | <li>导航三</li> |
|---|
| | | <li>导航四</li> |
|---|
| | | <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> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <iframe id="content" src="stock.html"></iframe> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | function nav(id) { |
|---|
| | | $('.nav-select').attr("class", "nav-unselect"); |
|---|
| | | $('#'+id).attr("class", "nav-select"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| | | |
|---|
| | | |
|---|
