1.复制文件夹10，粘贴到根文件夹，重命名为11，在11文件夹下的static文件夹下复制index.html文件，粘贴6次，对粘贴后的文件分别重命名为404.html、home.html、java.html、js.html、mysql.html、node.html。
2.分别对6个文件的内容进行修改，去掉标题，h3标签中的内容分别进行修改，例如home.html改为
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,=">
<title></title>
</head>
<body>
<h3>首页home</h3>
<script>
</script>
</body>
</html>
3.文件夹11右键，在终端中打开，输入node server，在浏览器中输入地址http://127.0.0.1:8080/home.html，再将地址的home改为js、node或者abc等进行测试。
4.修改index.html，body中删掉h3标签，添加div和iframe（框架）标签，div是菜单容器，iframe是页面容器
<div id="menu"></div>
<iframe src="./home.html" width="100%" height="90%" frameborder="0" scrolling="no" name="main"></iframe>
5.在script中动态创建菜单项
//定义菜单容器
var menu = document.getElementById('menu'), select
//定义页面容器
var iframe = document.getElementsByName('main')[0]
//创建菜单项
var programs = [//菜单参数
{ icon: 'home', title: '首页', href: 'home.html' },
{ icon: 'javascript', title: 'JS', href: 'js.html' },
{ icon: 'node.js', title: 'Node.js', href: 'node.html' },
{ icon: 'mysql', title: 'MySql', href: 'mysql.html' },
{ icon: 'java', title: 'Java', href: 'java.html' }
]
for (var i = 0; i < programs.length; i++) {//创建菜单
var a = document.createElement('a')
a.setAttribute('target', 'main')
a.id = programs[i].href
a.innerHTML = '<svg><use xlink: href="#icon-' + programs[i].icon + '"></use></svg><label>' + programs[i].title + '</label>'
menu.appendChild(a)
}
6.把svg图标原件添加到body中
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 1024 1024">
<path
d="M426.666667 853.333333 426.666667 597.333333 597.333333 597.333333 597.333333 853.333333 810.666667 853.333333 810.666667 512 938.666667 512 512 128 85.333333 512 213.333333 512 213.333333 853.333333 426.666667 853.333333Z">
</path>
</symbol>
<symbol id="icon-javascript" viewBox="0 0 1024 1024">
<path
d="M416 176.002h-160v424.996c0 105.16-36.064 134.522-98.824 134.522-29.41 0-55.896-5.042-76.5-12.126L64 847.808C93.4 857.932 138.518 864 173.814 864 317.91 864 416 796.258 416 602.04V176.002zM764.926 160C610.04 160 512 247.996 512 364.308c0 100.166 75.502 162.88 185.282 203.33 79.4 28.316 110.784 53.616 110.784 95.078 0 45.512-36.278 74.85-104.896 74.85-63.726 0-121.578-21.28-160.788-42.51v-0.042L512 821.454c37.278 21.276 106.882 42.51 182.334 42.51C875.708 863.96 960 766.86 960 652.568c0-97.1-53.916-159.8-170.556-204.326-86.278-34.382-122.54-53.59-122.54-97.084 0-34.4 31.376-65.738 96.086-65.738 63.692 0 107.488 21.414 133.01 34.582l38.25-128C894.25 174.44 840.376 160 764.926 160z">
</path>
</symbol>
<symbol id="icon-node.js" viewBox="0 0 1024 1024">
<path
d="M512 917.333c-10.667 0-21.333-2.133-32-8.533l-100.267-59.733c-14.933-8.534-8.533-10.667-2.133-12.8 19.2-6.4 23.467-8.534 44.8-21.334 2.133-2.133 4.267 0 6.4 0l76.8 44.8c2.133 2.134 6.4 2.134 8.533 0l296.534-170.666c2.133-2.134 4.266-4.267 4.266-8.534v-339.2c0-4.266-2.133-6.4-4.266-8.533L514.133 162.133c-2.133-2.133-6.4-2.133-8.533 0L209.067 332.8c-2.134 2.133-4.267 4.267-4.267 8.533v341.334c0 4.266 2.133 6.4 4.267 8.533l81.066 46.933c44.8 21.334 70.4-4.266 70.4-29.866v-339.2c0-4.267 4.267-8.534 8.534-8.534h38.4c4.266 0 8.533 4.267 8.533 8.534v339.2C416 768 384 800 328.533 800c-17.066 0-29.866 0-68.266-19.2l-76.8-44.8c-19.2-10.667-29.867-29.867-29.867-53.333V341.333c0-21.333 12.8-42.666 32-53.333l296.533-170.667c19.2-10.666 44.8-10.666 61.867 0L840.533 288c19.2 10.667 32 32 32 53.333v341.334c0 21.333-12.8 42.666-32 53.333L544 906.667c-10.667 8.533-21.333 10.666-32 10.666z m238.933-337.066c0-64-42.666-81.067-134.4-93.867-91.733-12.8-102.4-19.2-102.4-40.533 0-17.067 8.534-42.667 76.8-42.667 61.867 0 83.2 12.8 93.867 53.333 0 4.267 4.267 6.4 8.533 6.4h38.4c2.134 0 4.267 0 6.4-2.133 2.134-2.133 2.134-4.267 2.134-6.4-6.4-70.4-53.334-104.533-149.334-104.533-85.333 0-134.4 36.266-134.4 96 0 64 51.2 83.2 132.267 91.733 98.133 8.533 104.533 23.467 104.533 42.667 0 34.133-27.733 46.933-89.6 46.933-78.933 0-96-19.2-102.4-59.733 0-4.267-4.266-6.4-8.533-6.4h-38.4c-4.267 0-8.533 4.266-8.533 8.533 0 49.067 27.733 108.8 157.866 108.8 93.867 2.133 147.2-34.133 147.2-98.133z"
fill="#F15533"></path>
</symbol>
<symbol id="icon-mysql" viewBox="0 0 1024 1024">
<path
d="M469 760.5c-4.778-3.192-9.256-6.834-13.645-10.565-4.379-3.748-8.595-7.688-12.723-11.722-8.259-8.068-16.038-16.631-23.51-25.456-7.48-8.822-14.56-17.985-21.373-27.347a550.604 550.604 0 0 1-19.545-28.724c-12.449-19.547-23.873-39.762-34.321-60.466a873.506 873.506 0 0 1-15.085-31.352c-4.801-10.559-9.375-21.219-13.781-31.949l19.75 2.354a262.987 262.987 0 0 1-7.914 11.631 170.025 170.025 0 0 1-4.32 5.732c-1.521 1.918-3.108 3.837-4.975 5.832l0.675-0.742c0.063-0.068-0.047 0.072-0.087 0.132l-0.185 0.258-0.402 0.572-0.836 1.236a84.273 84.273 0 0 0-1.661 2.623 98.899 98.899 0 0 0-3.119 5.53 108.394 108.394 0 0 0-5.288 11.646c-3.057 7.955-5.149 16.208-6.132 24.495a95.089 95.089 0 0 0-0.536 6.22l-0.034 0.777-0.018 0.389-0.008 0.194-0.004 0.097-0.065 0.738-0.153 1.781-0.307 3.563-1.228 14.255-2.518 28.503-0.83 9.394-9.144 3.216c-0.707 0.248-0.778 0.258-1.01 0.33l-0.515 0.145-0.825 0.201a22.705 22.705 0 0 1-3.675 0.504 25.96 25.96 0 0 1-3.995-0.082 29.4 29.4 0 0 1-6.658-1.461c-3.968-1.37-7.11-3.246-9.812-5.195-5.357-3.947-9.086-8.236-12.334-12.481-3.216-4.263-5.85-8.552-8.22-12.843-2.357-4.292-4.43-8.59-6.328-12.89a214.11 214.11 0 0 1-2.719-6.453l-1.273-3.228-0.715-1.974-0.594-1.719a234.842 234.842 0 0 1-4.05-13.315 305.755 305.755 0 0 1-5.994-26.732c-3.205-17.972-4.848-36.317-4.547-54.879 0.292-18.547 2.622-37.336 7.612-55.752l0.155-0.573 0.589-1.544 1.51-3.959 1.516-4.107a453.622 453.622 0 0 0 2.916-8.267c1.879-5.519 3.665-11.037 5.229-16.476 1.557-5.416 2.931-10.835 3.777-15.677 0.417-2.375 0.683-4.68 0.695-6.112 0.017-0.672-0.064-1.177-0.046-0.749 0.024 0.212 0.066 0.701 0.387 1.697 0.342 0.985 0.95 2.65 2.76 4.834l-2.101-2.534-1.249-2.911 0.229 0.535c0.014 0.034 0.015 0.04 0.008 0.032l-0.088-0.138-0.347-0.547a26.681 26.681 0 0 0-1.001-1.421 37.253 37.253 0 0 0-2.643-3.133c-1.974-2.108-4.3-4.15-6.852-6.035l-1.729-1.277-1.5-1.793-1.313-1.569-1.054-1.306-1.972-2.531a192.445 192.445 0 0 1-3.686-5.001 230.532 230.532 0 0 1-6.787-10.09 257.223 257.223 0 0 1-11.921-20.857 273.754 273.754 0 0 1-17.984-44.381 268.892 268.892 0 0 1-3.263-11.563l-0.187-0.728-0.093-0.364-0.023-0.091c-0.18-0.694 0.219 0.842 0.169 0.655l-0.037-0.125-0.353-1.194-0.75-2.487-1.562-5.025a511.803 511.803 0 0 0-6.759-19.952c-2.379-6.548-4.889-12.99-7.559-19.088-1.333-3.044-2.713-6-4.113-8.763-1.392-2.753-2.84-5.348-4.172-7.38-0.711-1.096-1.042-1.5-2.339-3.25l-3.257-4.374-6.546-8.734a1961.297 1961.297 0 0 0-13.167-17.312l-6.6-8.482c-2.188-2.784-4.39-5.551-6.498-8.093l-1.534-1.821-0.712-0.821-0.167-0.19-0.082-0.093-0.731-0.874-0.145-0.181-0.657-0.838a110.883 110.883 0 0 1-4.129-5.736c-2.561-3.806-4.936-7.76-7.134-12.12-2.185-4.369-4.215-9.109-5.761-14.762-0.765-2.829-1.399-5.907-1.743-9.334-0.337-3.421-0.379-7.232 0.223-11.384 0.592-4.132 1.906-8.638 4.101-12.865 2.171-4.231 5.186-8.07 8.425-11.042 3.249-3.007 6.646-5.201 9.867-6.876l0.152-0.08c-1.256 0.66 0.467-0.25 0.19-0.098l0.858-0.416a33.4 33.4 0 0 1 1.214-0.536 36.775 36.775 0 0 1 1.9-0.732 41.296 41.296 0 0 1 3.167-0.982 48.583 48.583 0 0 1 5.441-1.122c6.77-0.971 12.48-0.657 17.824 0.027 5.319 0.713 10.173 1.899 14.754 3.312 9.141 2.853 17.184 6.615 24.708 10.72l-2.365-1.149 4.257 1.833 4.044 1.803a388.87 388.87 0 0 1 7.998 3.72 376.026 376.026 0 0 1 15.892 8.057c5.302 2.862 10.609 5.898 16.021 9.377a145.921 145.921 0 0 1 8.25 5.696c2.811 2.106 5.687 4.408 8.765 7.365l0.647 0.621 0.931 1.056-0.403-0.457c-0.025-0.027-0.02-0.022-0.012-0.015l0.143 0.135c0.134 0.125 0.316 0.286 0.51 0.447 0.393 0.326 0.839 0.662 1.288 0.96a13.453 13.453 0 0 0 2.607 1.371c0.805 0.306 1.498 0.475 2.146 0.551 0.649 0.08 1.267 0.073 1.998-0.023l2.196-0.287 1.908 0.074 4.452 0.173 4.293 0.209c2.854 0.151 5.703 0.325 8.559 0.521 5.711 0.395 11.443 0.88 17.266 1.511 5.832 0.639 11.723 1.401 17.956 2.527 3.126 0.571 6.335 1.229 9.822 2.134 1.748 0.457 3.57 0.977 5.554 1.644 1.989 0.675 4.136 1.471 6.722 2.712l-2.742-1.131 2.03 0.732 1.743 0.654 3.355 1.306c2.204 0.875 4.365 1.764 6.507 2.669a404.28 404.28 0 0 1 12.652 5.609 478.77 478.77 0 0 1 24.511 12.244c16.065 8.584 31.596 18.063 46.622 28.315 15.016 10.262 29.527 21.305 43.35 33.209a475.842 475.842 0 0 1 20.246 18.436 473.967 473.967 0 0 1 9.724 9.668l2.386 2.464 1.188 1.238 0.074 0.077c-0.277-0.276 0.725 0.728-0.603-0.599l0.166 0.161 0.408 0.399 0.68 0.673a282.783 282.783 0 0 1 4.969 5.094c6.381 6.723 12.382 13.517 18.237 20.454a557.655 557.655 0 0 1 16.976 21.183 545.37 545.37 0 0 1 30.712 44.703c9.505 15.416 18.25 31.356 26.025 47.835 7.776 16.474 14.66 33.457 20.276 50.948l-0.78-2.006a4216.08 4216.08 0 0 0 17.072 39.002c5.756 12.982 11.534 25.947 17.422 38.812 5.895 12.846 11.853 25.683 17.981 38.084a437.137 437.137 0 0 0 4.634 9.101l1.163 2.188 0.29 0.537 0.145 0.269 0.019 0.033c-0.194-0.326 0.462 0.777-0.432-0.723l0.03 0.052 0.075 0.125 0.647 1.064 2.684 4.329a288.72 288.72 0 0 0 5.43 8.349c0.891 1.31 1.778 2.58 2.559 3.641 0.384 0.521 0.748 0.995 0.967 1.271 0.101 0.128 0.17 0.211 0.092 0.142l-0.305-0.276c-0.147-0.126-0.501-0.448-1.053-0.853l-1.844-1.229c-0.078-0.044 0.04 0.028 0.085 0.056l0.204 0.124 0.462 0.272 0.998 0.573 2.108 1.162c1.435 0.772 2.906 1.527 4.391 2.26a146.183 146.183 0 0 0 9.053 4.085c6.096 2.502 12.279 4.54 18.294 5.886l1.903 0.426 0.987 0.392 26.038 10.337 13.052 5.291 6.61 2.749 3.424 1.469 1.847 0.824 1.054 0.487 1.403 0.686 1.028 0.503 0.785 0.54a4825.82 4825.82 0 0 1 30.059 20.816c5.002 3.487 9.99 7.002 14.972 10.556 4.986 3.555 9.962 7.123 14.979 10.814l-1.13-0.724 3.057 1.931 2.914 1.9a308.395 308.395 0 0 1 5.752 3.889c3.813 2.642 7.591 5.378 11.359 8.312 3.772 2.953 7.518 6.039 11.347 9.777 1.919 1.897 3.86 3.925 5.91 6.599 1.024 1.357 2.088 2.876 3.173 4.908a26.539 26.539 0 0 1 1.593 3.629c0.499 1.441 0.97 3.174 1.163 5.353l1.549 17.479-17.22-1.016-1.628-0.096-1.757-0.084-3.564-0.134-7.196-0.169a405.242 405.242 0 0 0-14.459 0.032c-9.643 0.194-19.272 0.724-28.803 1.67-9.528 0.95-18.97 2.313-28.155 4.28-9.175 1.962-18.141 4.481-26.382 7.971l-1.506 0.638-1.678 0.324c0.103-0.02-0.039-0.001-0.083 0.004l-0.225 0.029-0.504 0.076-1.064 0.192c-0.718 0.142-1.437 0.307-2.133 0.489-1.392 0.365-2.703 0.808-3.789 1.275-1.082 0.459-1.927 0.973-2.309 1.251-0.196 0.135-0.266 0.196-0.254 0.124 0.004-0.065 0.1-0.283 0.131-0.547l-2.131-9.91 0.391 0.503 0.264 0.357 0.461 0.656c0.293 0.426 0.561 0.837 0.82 1.247 0.519 0.819 0.996 1.63 1.447 2.444a55.545 55.545 0 0 1 2.424 4.941 58.013 58.013 0 0 1 3.345 10.329l-1.177-2.833c0.471 0.846 1.073 1.875 1.634 2.819l1.743 2.895a238.221 238.221 0 0 0 3.612 5.739c2.463 3.788 5.025 7.498 7.699 11.054 2.672 3.55 5.462 6.963 8.369 10.021 1.452 1.525 2.937 2.956 4.421 4.217 1.478 1.254 2.978 2.343 4.307 3.078l1.53 0.846 1.061 1.111c-0.09-0.094 0.002 0.013 0.021 0.036l0.129 0.149 0.309 0.341 0.698 0.732a58.307 58.307 0 0 0 1.537 1.511 94.16 94.16 0 0 0 3.339 3.016 163.819 163.819 0 0 0 7.197 5.84c4.959 3.8 10.166 7.406 15.496 10.864 10.67 6.923 21.861 13.222 33.241 19.228l8.671 4.483a336.21 336.21 0 0 1 8.675 4.752c5.723 3.246 11.366 6.615 16.885 10.192 5.521 3.569 10.942 7.301 16.196 11.27 5.255 3.965 10.343 8.18 15.064 12.805l-0.16-0.126a165.855 165.855 0 0 1 4.936 4.055 158.83 158.83 0 0 1 4.766 4.224 93.983 93.983 0 0 1 4.544 4.475c1.46 1.55 2.873 3.154 4.116 4.906l-0.182-0.145L940 921.5l-8.715-3.544-0.084-0.034-0.098-0.11c-1.368-1.547-2.905-2.955-4.485-4.308-1.583-1.352-3.228-2.636-4.889-3.896a154.889 154.889 0 0 0-5.074-3.67 163.198 163.198 0 0 0-5.19-3.467l-0.16-0.126c-10.039-7.954-21.155-14.521-32.529-20.49a384.725 384.725 0 0 0-17.311-8.484 324.208 324.208 0 0 0-8.792-3.883l-9.001-3.721c-12.111-5.08-24.041-10.69-35.727-17.008-5.839-3.171-11.609-6.527-17.275-10.201-2.831-1.842-5.643-3.753-8.407-5.822a112.246 112.246 0 0 1-4.136-3.231 72.053 72.053 0 0 1-2.07-1.762l-1.057-0.958-0.55-0.523-0.293-0.289-0.395-0.409 2.591 1.957c-2.909-1.328-5.331-2.895-7.575-4.52-2.232-1.632-4.268-3.343-6.195-5.095-3.849-3.508-7.292-7.179-10.564-10.932-3.267-3.755-6.343-7.597-9.303-11.509a257.628 257.628 0 0 1-4.351-5.93 182.788 182.788 0 0 1-2.111-3.025 146.07 146.07 0 0 1-2.115-3.168l-0.626-0.969-0.551-1.864a37.106 37.106 0 0 0-2.567-6.422 34.048 34.048 0 0 0-1.694-2.938 27.981 27.981 0 0 0-0.913-1.325l-0.445-0.581-0.198-0.239-0.075-0.083c-0.011-0.012-0.02-0.021-0.02-0.019 0.009 0.012-0.03-0.031 0.065 0.086l-3.584-4.411 1.452-5.499a20.31 20.31 0 0 1 2.568-5.799 23.363 23.363 0 0 1 3.541-4.261c2.478-2.348 4.961-3.897 7.346-5.159 2.392-1.247 4.716-2.183 7.025-2.965a58.037 58.037 0 0 1 5.244-1.497l0.922-0.207 0.49-0.102 0.634-0.116-3.184 0.962c9.874-4.932 20.025-8.493 30.219-11.316 10.204-2.797 20.462-4.867 30.728-6.485 10.269-1.611 20.549-2.761 30.844-3.555 5.148-0.396 10.301-0.7 15.47-0.913 2.585-0.108 5.173-0.187 7.775-0.229l3.921-0.047 1.986-0.003 2.112 0.02-15.67 16.463a9.13 9.13 0 0 0 0.417 2.155c0.129 0.399 0.213 0.574 0.229 0.637 0.031 0.106-0.167-0.18-0.497-0.548-0.671-0.771-1.802-1.896-3.07-3.012-2.571-2.271-5.714-4.651-8.977-6.943-3.277-2.301-6.726-4.552-10.242-6.738a285.332 285.332 0 0 0-5.325-3.228l-2.683-1.565-2.585-1.461-0.25-0.141-0.881-0.583c-4.926-3.263-9.98-6.524-15.044-9.77l-15.26-9.725a4711.566 4711.566 0 0 0-30.686-19.319l1.813 1.042-5.099-1.962-6.354-2.348-12.97-4.661-26.15-9.186 2.891 0.817c-8.734-1.618-16.971-4.046-24.901-6.956a184.724 184.724 0 0 1-17.436-7.457l-2.888-1.454-1.477-0.777-0.77-0.415-0.934-0.522-0.803-0.448-1.041-0.781a27.581 27.581 0 0 1-2.073-1.717l-0.689-0.647-0.572-0.565a45.45 45.45 0 0 1-1.713-1.835 74.675 74.675 0 0 1-2.412-2.88 141.19 141.19 0 0 1-3.785-4.982 322.988 322.988 0 0 1-6.561-9.392l-3.113-4.673-0.783-1.198-0.103-0.159-0.058-0.09-0.497-0.834-0.185-0.315-0.366-0.628-1.433-2.494a477.232 477.232 0 0 1-5.409-9.813c-6.965-12.972-13.425-25.85-19.8-38.784a3041.978 3041.978 0 0 1-18.767-38.822 4251.901 4251.901 0 0 1-18.262-39.025l-0.329-0.714-0.451-1.293c-10.718-30.718-25.767-60.175-43.55-87.991-8.904-13.908-18.552-27.387-28.749-40.418a510.183 510.183 0 0 0-15.763-19.13c-5.394-6.222-10.951-12.327-16.564-18.089a237.071 237.071 0 0 0-4.137-4.161l-0.479-0.464-0.174-0.167-0.938-0.935-1.07-1.094-2.151-2.179a421.657 421.657 0 0 0-8.775-8.556 426.803 426.803 0 0 0-18.311-16.35 462.859 462.859 0 0 0-39.282-29.649c-13.623-9.193-27.762-17.654-42.237-25.385a428.318 428.318 0 0 0-21.965-10.921 355.173 355.173 0 0 0-11.096-4.895 280.865 280.865 0 0 0-5.51-2.248l-2.696-1.043-2.321-0.854-1.602-0.589-1.141-0.542c0.128 0.061-0.273-0.123-0.867-0.315-0.6-0.199-1.397-0.437-2.285-0.67-1.788-0.47-3.918-0.927-6.153-1.336-4.492-0.824-9.416-1.488-14.417-2.042-5.013-0.554-10.144-1-15.306-1.367a487.998 487.998 0 0 0-7.76-0.488l-3.872-0.197-3.717-0.153 4.103-0.213a57.63 57.63 0 0 1-14.882 0.068 58.294 58.294 0 0 1-14.205-3.656 63.292 63.292 0 0 1-12.314-6.551 65.272 65.272 0 0 1-5.452-4.152 61.834 61.834 0 0 1-2.643-2.375 54.994 54.994 0 0 1-1.367-1.348l-0.745-0.777-0.424-0.458-0.691-0.78 1.577 1.677c-0.912-0.898-2.343-2.11-3.967-3.333a96.797 96.797 0 0 0-5.423-3.783c-3.905-2.546-8.213-5.063-12.66-7.494a326.714 326.714 0 0 0-13.75-7.069 442.732 442.732 0 0 0-7.063-3.357l-3.54-1.619-3.37-1.493-1.504-0.667-0.861-0.483c-5.319-2.986-10.655-5.451-15.524-7.014-2.421-0.779-4.725-1.333-6.681-1.615-1.921-0.298-3.62-0.271-4.124-0.196-0.106 0.011-0.14 0.02 0.048-0.032 0.097-0.029 0.242-0.071 0.536-0.176l0.614-0.241 0.584-0.26 0.548-0.267c-0.328 0.178 1.344-0.706 0.038-0.019-0.035 0.01 0.268-0.148 0.821-0.66 0.533-0.495 1.26-1.393 1.739-2.366 0.495-0.972 0.723-1.918 0.781-2.421 0.085-1.068-0.121-0.361 0.274 1.077 0.352 1.442 1.124 3.527 2.198 5.73 1.071 2.213 2.436 4.592 3.941 6.896a65.634 65.634 0 0 0 2.25 3.235l0.187 0.249-0.659-0.788 0.144 0.167 0.283 0.331 1.074 1.273 1.979 2.417c2.534 3.145 4.859 6.155 7.167 9.173a887.454 887.454 0 0 1 6.775 9.01 2014.012 2014.012 0 0 1 13.186 17.973l6.505 9.001 3.242 4.514 1.842 2.583a81.718 81.718 0 0 1 2.108 3.201c2.602 4.167 4.624 8.053 6.483 11.878 1.847 3.819 3.479 7.561 5.015 11.273 3.059 7.418 5.716 14.726 8.198 22.028a554.95 554.95 0 0 1 6.911 21.91l1.59 5.524 0.78 2.801 0.396 1.455 0.284 1.104 0.07 0.304 0.14 0.609a223.397 223.397 0 0 0 2.475 9.694 229.28 229.28 0 0 0 14.121 37.519c2.898 6.03 6.036 11.946 9.433 17.642a186.91 186.91 0 0 0 5.262 8.338 148.27 148.27 0 0 0 2.732 3.944l1.357 1.853 1.079 1.417-3.229-3.07c4.337 3.42 8.48 7.244 12.317 11.609a78.218 78.218 0 0 1 5.519 7.034 66.522 66.522 0 0 1 2.584 4.026c0.425 0.718 0.848 1.465 1.28 2.279l0.67 1.307 0.368 0.764 0.211 0.458 0.358 0.817-3.35-5.444c2.794 3.354 4.084 6.414 4.918 8.839a32.269 32.269 0 0 1 1.391 6.154c0.428 3.453 0.355 6.013 0.234 8.386-0.293 4.665-0.969 8.406-1.705 12.02-1.509 7.136-3.397 13.494-5.405 19.747a369.235 369.235 0 0 1-6.459 18.215 489.651 489.651 0 0 1-3.497 8.877l-1.815 4.418-1.919 4.527 0.744-2.117c-4.56 14.689-7.125 30.253-8.033 46.109-0.892 15.863-0.118 32.027 2.004 48.073a271 271 0 0 0 4.267 23.879c0.889 3.917 1.852 7.842 2.91 11.555l0.718 2.438 0.959 2.831c0.65 1.877 1.325 3.731 2.024 5.559 2.788 7.271 6.05 14.262 9.745 19.728 1.812 2.7 3.798 4.984 5.32 6.243 0.739 0.629 1.344 0.972 1.437 1.051 0.04 0.045-0.048 0.026-0.387 0.014a6.987 6.987 0 0 0-0.772 0.022 8.698 8.698 0 0 0-1.274 0.206l-0.432 0.108-0.32 0.091c-0.167 0.054-0.174 0.043-0.818 0.27l-9.974 12.609 8.08-57.157c1.874-10.57 5.116-20.777 9.455-30.396a133.137 133.137 0 0 1 7.346-13.998 122.717 122.717 0 0 1 4.347-6.664 106.737 106.737 0 0 1 2.384-3.274l1.279-1.646 0.684-0.847 0.844-1.008 0.429-0.512 0.247-0.23c1.264-1.178 2.624-2.605 3.969-4.099a144.07 144.07 0 0 0 4.036-4.7 222.467 222.467 0 0 0 3.972-4.966 246.029 246.029 0 0 0 3.814-5.04l12.996-17.662 6.755 20.016a970.96 970.96 0 0 0 11.453 32.043 857.305 857.305 0 0 0 12.556 31.637c8.829 20.905 18.418 41.513 29.092 61.574 5.354 10.02 10.92 19.935 16.806 29.667a525.828 525.828 0 0 0 18.605 28.619 398.964 398.964 0 0 0 20.746 27.179 289.798 289.798 0 0 0 11.381 12.808c3.939 4.137 7.977 8.208 12.382 11.887z">
</path>
</symbol>
<symbol id="icon-java" viewBox="0 0 1024 1024">
<path
d="M558.08 472.064c48.128 53.248-13.312 103.424-13.312 103.424s119.808-61.44 65.536-139.264c-51.2-71.68-91.136-107.52 122.88-232.448 0 1.024-335.872 86.016-175.104 268.288"
fill="#FF0000"></path>
<path
d="M610.304 5.12s101.376 101.376-96.256 258.048C356.352 389.12 478.208 460.8 514.048 543.744 420.864 459.776 354.304 386.048 399.36 317.44 463.872 216.064 651.264 166.912 610.304 5.12"
fill="#FF0000"></path>
<path
d="M720.896 757.76c183.296-95.232 98.304-188.416 39.936-175.104-15.36 3.072-21.504 5.12-21.504 5.12s5.12-8.192 16.384-11.264c117.76-40.96 207.872 120.832-37.888 186.368-1.024 0 2.048-3.072 3.072-5.12m-337.92 38.912s-37.888 21.504 26.624 29.696c76.8 8.192 117.76 8.192 202.752-8.192 0 0 23.552 15.36 53.248 26.624-191.488 80.896-433.152-5.12-282.624-48.128m-23.552-106.496s-43.008 31.744 23.552 37.888c82.944 8.192 149.504 10.24 261.12-13.312 0 0 16.384 16.384 40.96 24.576-231.424 68.608-490.496 5.12-325.632-49.152"
fill="#6699FF"></path>
<path
d="M811.008 876.544s27.648 23.552-31.744 40.96c-111.616 34.816-460.8 45.056-558.08 2.048-34.816-15.36 31.744-35.84 51.2-40.96 21.504-5.12 34.816-3.072 34.816-3.072-38.912-28.672-251.904 52.224-107.52 75.776 390.144 62.464 712.704-28.672 611.328-74.752M400.384 578.56s-178.176 43.008-63.488 56.32c49.152 6.144 146.432 5.12 235.52-3.072 73.728-6.144 147.456-19.456 147.456-19.456s-26.624 11.264-45.056 24.576c-181.248 48.128-530.432 26.624-430.08-23.552 88.064-39.936 155.648-34.816 155.648-34.816"
fill="#6699FF"></path>
<path
d="M418.816 1015.808c176.128 11.264 446.464-6.144 453.632-90.112 0 0-13.312 31.744-146.432 56.32-150.528 27.648-336.896 24.576-446.464 6.144 2.048 1.024 24.576 20.48 139.264 27.648"
fill="#6699FF"></path>
</symbol>
</svg>
7.添加菜单的样式，在浏览器中预览
body {
width: 800px;
height: 100%;
margin: 0 auto;
}
#menu {
background: linear-gradient(#eee, #bbb);
}
a {
display: inline-block;
width: auto;
line-height: 30px;
padding: 5px 10px;
user-select: none;
cursor: pointer;
}
a>svg {
width: 24px;
height: 24px;
vertical-align: -6px;
cursor: pointer;
}
a>label {
line-height: 24px;
cursor: pointer;
}
.click {
background-color: #999;
color: #eee;
}
8.在script标签中已有代码的下面，添加菜单的鼠标点击事件
//当鼠标点击菜单
menu.onclick = function (e) {
//定位鼠标点击目标为菜单项的a标签
var target = e.target
if (target.tagName == 'use') {
target = target.parentNode
target = target.parentNode
} else if (target.tagName == 'svg') {
target = target.parentNode
} else if (target.tagName == 'LABEL') {
target = target.parentNode
} else if (target.tagName == 'A') {
target = target
}
//点击的菜单项添加样式，地址栏添加hash
if (!target.className) {
target.classList.add('click')
window.location.hash = target.id;
if (select) select.classList.remove('click')
select = target
}
}
8.再添加浏览器地址输入hash地址时，hash改变事件
//当地址栏hash发生改变
window.onhashchange = function (e) {
var path = e.newURL.split('#')[1];
iframe.src = path
var index = programs.findIndex(function (item) {
return item.href == path;
});
if (!menu.children[index].className) {
menu.children[index].classList.add('click')
if (select) select.classList.remove('click')
select = menu.children[index]
}
}
9.当浏览器刷新页面时将地址的hash定向到home.html，在script标签中已有代码的上方输入条件判断
//刷新页面时，将首页定向到#home.html
if (window.location.hash == '') {
window.location.href = window.location.href + '#home.html'
} else {
var hash = window.location.hash
window.location.href = window.location.origin
window.location.href = window.location.origin + hash
}
10.index.html的完整代码及效果
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="icon" href="data:;base64,=">
<title>index</title>
<style>
body {
width: 800px;
height: 100%;
margin: 0 auto;
}
#menu {
background: linear-gradient(#eee, #bbb);
}
a {
display: inline-block;
width: auto;
line-height: 30px;
padding: 5px 10px;
user-select: none;
cursor: pointer;
}
a>svg {
width: 24px;
height: 24px;
vertical-align: -6px;
cursor: pointer;
}
a>label {
line-height: 24px;
cursor: pointer;
}
.click {
background-color: #999;
color: #eee;
}
</style>
</head>
<body>
<div id="menu"></div>
<iframe src="./home.html" width="100%" height="90%" frameborder="0" scrolling="no" name="main"></iframe>
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 1024 1024">
<path
d="M426.666667 853.333333 426.666667 597.333333 597.333333 597.333333 597.333333 853.333333 810.666667 853.333333 810.666667 512 938.666667 512 512 128 85.333333 512 213.333333 512 213.333333 853.333333 426.666667 853.333333Z">
</path>
</symbol>
<symbol id="icon-javascript" viewBox="0 0 1024 1024">
<path
d="M416 176.002h-160v424.996c0 105.16-36.064 134.522-98.824 134.522-29.41 0-55.896-5.042-76.5-12.126L64 847.808C93.4 857.932 138.518 864 173.814 864 317.91 864 416 796.258 416 602.04V176.002zM764.926 160C610.04 160 512 247.996 512 364.308c0 100.166 75.502 162.88 185.282 203.33 79.4 28.316 110.784 53.616 110.784 95.078 0 45.512-36.278 74.85-104.896 74.85-63.726 0-121.578-21.28-160.788-42.51v-0.042L512 821.454c37.278 21.276 106.882 42.51 182.334 42.51C875.708 863.96 960 766.86 960 652.568c0-97.1-53.916-159.8-170.556-204.326-86.278-34.382-122.54-53.59-122.54-97.084 0-34.4 31.376-65.738 96.086-65.738 63.692 0 107.488 21.414 133.01 34.582l38.25-128C894.25 174.44 840.376 160 764.926 160z">
</path>
</symbol>
<symbol id="icon-node.js" viewBox="0 0 1024 1024">
<path
d="M512 917.333c-10.667 0-21.333-2.133-32-8.533l-100.267-59.733c-14.933-8.534-8.533-10.667-2.133-12.8 19.2-6.4 23.467-8.534 44.8-21.334 2.133-2.133 4.267 0 6.4 0l76.8 44.8c2.133 2.134 6.4 2.134 8.533 0l296.534-170.666c2.133-2.134 4.266-4.267 4.266-8.534v-339.2c0-4.266-2.133-6.4-4.266-8.533L514.133 162.133c-2.133-2.133-6.4-2.133-8.533 0L209.067 332.8c-2.134 2.133-4.267 4.267-4.267 8.533v341.334c0 4.266 2.133 6.4 4.267 8.533l81.066 46.933c44.8 21.334 70.4-4.266 70.4-29.866v-339.2c0-4.267 4.267-8.534 8.534-8.534h38.4c4.266 0 8.533 4.267 8.533 8.534v339.2C416 768 384 800 328.533 800c-17.066 0-29.866 0-68.266-19.2l-76.8-44.8c-19.2-10.667-29.867-29.867-29.867-53.333V341.333c0-21.333 12.8-42.666 32-53.333l296.533-170.667c19.2-10.666 44.8-10.666 61.867 0L840.533 288c19.2 10.667 32 32 32 53.333v341.334c0 21.333-12.8 42.666-32 53.333L544 906.667c-10.667 8.533-21.333 10.666-32 10.666z m238.933-337.066c0-64-42.666-81.067-134.4-93.867-91.733-12.8-102.4-19.2-102.4-40.533 0-17.067 8.534-42.667 76.8-42.667 61.867 0 83.2 12.8 93.867 53.333 0 4.267 4.267 6.4 8.533 6.4h38.4c2.134 0 4.267 0 6.4-2.133 2.134-2.133 2.134-4.267 2.134-6.4-6.4-70.4-53.334-104.533-149.334-104.533-85.333 0-134.4 36.266-134.4 96 0 64 51.2 83.2 132.267 91.733 98.133 8.533 104.533 23.467 104.533 42.667 0 34.133-27.733 46.933-89.6 46.933-78.933 0-96-19.2-102.4-59.733 0-4.267-4.266-6.4-8.533-6.4h-38.4c-4.267 0-8.533 4.266-8.533 8.533 0 49.067 27.733 108.8 157.866 108.8 93.867 2.133 147.2-34.133 147.2-98.133z"
fill="#F15533"></path>
</symbol>
<symbol id="icon-mysql" viewBox="0 0 1024 1024">
<path
d="M469 760.5c-4.778-3.192-9.256-6.834-13.645-10.565-4.379-3.748-8.595-7.688-12.723-11.722-8.259-8.068-16.038-16.631-23.51-25.456-7.48-8.822-14.56-17.985-21.373-27.347a550.604 550.604 0 0 1-19.545-28.724c-12.449-19.547-23.873-39.762-34.321-60.466a873.506 873.506 0 0 1-15.085-31.352c-4.801-10.559-9.375-21.219-13.781-31.949l19.75 2.354a262.987 262.987 0 0 1-7.914 11.631 170.025 170.025 0 0 1-4.32 5.732c-1.521 1.918-3.108 3.837-4.975 5.832l0.675-0.742c0.063-0.068-0.047 0.072-0.087 0.132l-0.185 0.258-0.402 0.572-0.836 1.236a84.273 84.273 0 0 0-1.661 2.623 98.899 98.899 0 0 0-3.119 5.53 108.394 108.394 0 0 0-5.288 11.646c-3.057 7.955-5.149 16.208-6.132 24.495a95.089 95.089 0 0 0-0.536 6.22l-0.034 0.777-0.018 0.389-0.008 0.194-0.004 0.097-0.065 0.738-0.153 1.781-0.307 3.563-1.228 14.255-2.518 28.503-0.83 9.394-9.144 3.216c-0.707 0.248-0.778 0.258-1.01 0.33l-0.515 0.145-0.825 0.201a22.705 22.705 0 0 1-3.675 0.504 25.96 25.96 0 0 1-3.995-0.082 29.4 29.4 0 0 1-6.658-1.461c-3.968-1.37-7.11-3.246-9.812-5.195-5.357-3.947-9.086-8.236-12.334-12.481-3.216-4.263-5.85-8.552-8.22-12.843-2.357-4.292-4.43-8.59-6.328-12.89a214.11 214.11 0 0 1-2.719-6.453l-1.273-3.228-0.715-1.974-0.594-1.719a234.842 234.842 0 0 1-4.05-13.315 305.755 305.755 0 0 1-5.994-26.732c-3.205-17.972-4.848-36.317-4.547-54.879 0.292-18.547 2.622-37.336 7.612-55.752l0.155-0.573 0.589-1.544 1.51-3.959 1.516-4.107a453.622 453.622 0 0 0 2.916-8.267c1.879-5.519 3.665-11.037 5.229-16.476 1.557-5.416 2.931-10.835 3.777-15.677 0.417-2.375 0.683-4.68 0.695-6.112 0.017-0.672-0.064-1.177-0.046-0.749 0.024 0.212 0.066 0.701 0.387 1.697 0.342 0.985 0.95 2.65 2.76 4.834l-2.101-2.534-1.249-2.911 0.229 0.535c0.014 0.034 0.015 0.04 0.008 0.032l-0.088-0.138-0.347-0.547a26.681 26.681 0 0 0-1.001-1.421 37.253 37.253 0 0 0-2.643-3.133c-1.974-2.108-4.3-4.15-6.852-6.035l-1.729-1.277-1.5-1.793-1.313-1.569-1.054-1.306-1.972-2.531a192.445 192.445 0 0 1-3.686-5.001 230.532 230.532 0 0 1-6.787-10.09 257.223 257.223 0 0 1-11.921-20.857 273.754 273.754 0 0 1-17.984-44.381 268.892 268.892 0 0 1-3.263-11.563l-0.187-0.728-0.093-0.364-0.023-0.091c-0.18-0.694 0.219 0.842 0.169 0.655l-0.037-0.125-0.353-1.194-0.75-2.487-1.562-5.025a511.803 511.803 0 0 0-6.759-19.952c-2.379-6.548-4.889-12.99-7.559-19.088-1.333-3.044-2.713-6-4.113-8.763-1.392-2.753-2.84-5.348-4.172-7.38-0.711-1.096-1.042-1.5-2.339-3.25l-3.257-4.374-6.546-8.734a1961.297 1961.297 0 0 0-13.167-17.312l-6.6-8.482c-2.188-2.784-4.39-5.551-6.498-8.093l-1.534-1.821-0.712-0.821-0.167-0.19-0.082-0.093-0.731-0.874-0.145-0.181-0.657-0.838a110.883 110.883 0 0 1-4.129-5.736c-2.561-3.806-4.936-7.76-7.134-12.12-2.185-4.369-4.215-9.109-5.761-14.762-0.765-2.829-1.399-5.907-1.743-9.334-0.337-3.421-0.379-7.232 0.223-11.384 0.592-4.132 1.906-8.638 4.101-12.865 2.171-4.231 5.186-8.07 8.425-11.042 3.249-3.007 6.646-5.201 9.867-6.876l0.152-0.08c-1.256 0.66 0.467-0.25 0.19-0.098l0.858-0.416a33.4 33.4 0 0 1 1.214-0.536 36.775 36.775 0 0 1 1.9-0.732 41.296 41.296 0 0 1 3.167-0.982 48.583 48.583 0 0 1 5.441-1.122c6.77-0.971 12.48-0.657 17.824 0.027 5.319 0.713 10.173 1.899 14.754 3.312 9.141 2.853 17.184 6.615 24.708 10.72l-2.365-1.149 4.257 1.833 4.044 1.803a388.87 388.87 0 0 1 7.998 3.72 376.026 376.026 0 0 1 15.892 8.057c5.302 2.862 10.609 5.898 16.021 9.377a145.921 145.921 0 0 1 8.25 5.696c2.811 2.106 5.687 4.408 8.765 7.365l0.647 0.621 0.931 1.056-0.403-0.457c-0.025-0.027-0.02-0.022-0.012-0.015l0.143 0.135c0.134 0.125 0.316 0.286 0.51 0.447 0.393 0.326 0.839 0.662 1.288 0.96a13.453 13.453 0 0 0 2.607 1.371c0.805 0.306 1.498 0.475 2.146 0.551 0.649 0.08 1.267 0.073 1.998-0.023l2.196-0.287 1.908 0.074 4.452 0.173 4.293 0.209c2.854 0.151 5.703 0.325 8.559 0.521 5.711 0.395 11.443 0.88 17.266 1.511 5.832 0.639 11.723 1.401 17.956 2.527 3.126 0.571 6.335 1.229 9.822 2.134 1.748 0.457 3.57 0.977 5.554 1.644 1.989 0.675 4.136 1.471 6.722 2.712l-2.742-1.131 2.03 0.732 1.743 0.654 3.355 1.306c2.204 0.875 4.365 1.764 6.507 2.669a404.28 404.28 0 0 1 12.652 5.609 478.77 478.77 0 0 1 24.511 12.244c16.065 8.584 31.596 18.063 46.622 28.315 15.016 10.262 29.527 21.305 43.35 33.209a475.842 475.842 0 0 1 20.246 18.436 473.967 473.967 0 0 1 9.724 9.668l2.386 2.464 1.188 1.238 0.074 0.077c-0.277-0.276 0.725 0.728-0.603-0.599l0.166 0.161 0.408 0.399 0.68 0.673a282.783 282.783 0 0 1 4.969 5.094c6.381 6.723 12.382 13.517 18.237 20.454a557.655 557.655 0 0 1 16.976 21.183 545.37 545.37 0 0 1 30.712 44.703c9.505 15.416 18.25 31.356 26.025 47.835 7.776 16.474 14.66 33.457 20.276 50.948l-0.78-2.006a4216.08 4216.08 0 0 0 17.072 39.002c5.756 12.982 11.534 25.947 17.422 38.812 5.895 12.846 11.853 25.683 17.981 38.084a437.137 437.137 0 0 0 4.634 9.101l1.163 2.188 0.29 0.537 0.145 0.269 0.019 0.033c-0.194-0.326 0.462 0.777-0.432-0.723l0.03 0.052 0.075 0.125 0.647 1.064 2.684 4.329a288.72 288.72 0 0 0 5.43 8.349c0.891 1.31 1.778 2.58 2.559 3.641 0.384 0.521 0.748 0.995 0.967 1.271 0.101 0.128 0.17 0.211 0.092 0.142l-0.305-0.276c-0.147-0.126-0.501-0.448-1.053-0.853l-1.844-1.229c-0.078-0.044 0.04 0.028 0.085 0.056l0.204 0.124 0.462 0.272 0.998 0.573 2.108 1.162c1.435 0.772 2.906 1.527 4.391 2.26a146.183 146.183 0 0 0 9.053 4.085c6.096 2.502 12.279 4.54 18.294 5.886l1.903 0.426 0.987 0.392 26.038 10.337 13.052 5.291 6.61 2.749 3.424 1.469 1.847 0.824 1.054 0.487 1.403 0.686 1.028 0.503 0.785 0.54a4825.82 4825.82 0 0 1 30.059 20.816c5.002 3.487 9.99 7.002 14.972 10.556 4.986 3.555 9.962 7.123 14.979 10.814l-1.13-0.724 3.057 1.931 2.914 1.9a308.395 308.395 0 0 1 5.752 3.889c3.813 2.642 7.591 5.378 11.359 8.312 3.772 2.953 7.518 6.039 11.347 9.777 1.919 1.897 3.86 3.925 5.91 6.599 1.024 1.357 2.088 2.876 3.173 4.908a26.539 26.539 0 0 1 1.593 3.629c0.499 1.441 0.97 3.174 1.163 5.353l1.549 17.479-17.22-1.016-1.628-0.096-1.757-0.084-3.564-0.134-7.196-0.169a405.242 405.242 0 0 0-14.459 0.032c-9.643 0.194-19.272 0.724-28.803 1.67-9.528 0.95-18.97 2.313-28.155 4.28-9.175 1.962-18.141 4.481-26.382 7.971l-1.506 0.638-1.678 0.324c0.103-0.02-0.039-0.001-0.083 0.004l-0.225 0.029-0.504 0.076-1.064 0.192c-0.718 0.142-1.437 0.307-2.133 0.489-1.392 0.365-2.703 0.808-3.789 1.275-1.082 0.459-1.927 0.973-2.309 1.251-0.196 0.135-0.266 0.196-0.254 0.124 0.004-0.065 0.1-0.283 0.131-0.547l-2.131-9.91 0.391 0.503 0.264 0.357 0.461 0.656c0.293 0.426 0.561 0.837 0.82 1.247 0.519 0.819 0.996 1.63 1.447 2.444a55.545 55.545 0 0 1 2.424 4.941 58.013 58.013 0 0 1 3.345 10.329l-1.177-2.833c0.471 0.846 1.073 1.875 1.634 2.819l1.743 2.895a238.221 238.221 0 0 0 3.612 5.739c2.463 3.788 5.025 7.498 7.699 11.054 2.672 3.55 5.462 6.963 8.369 10.021 1.452 1.525 2.937 2.956 4.421 4.217 1.478 1.254 2.978 2.343 4.307 3.078l1.53 0.846 1.061 1.111c-0.09-0.094 0.002 0.013 0.021 0.036l0.129 0.149 0.309 0.341 0.698 0.732a58.307 58.307 0 0 0 1.537 1.511 94.16 94.16 0 0 0 3.339 3.016 163.819 163.819 0 0 0 7.197 5.84c4.959 3.8 10.166 7.406 15.496 10.864 10.67 6.923 21.861 13.222 33.241 19.228l8.671 4.483a336.21 336.21 0 0 1 8.675 4.752c5.723 3.246 11.366 6.615 16.885 10.192 5.521 3.569 10.942 7.301 16.196 11.27 5.255 3.965 10.343 8.18 15.064 12.805l-0.16-0.126a165.855 165.855 0 0 1 4.936 4.055 158.83 158.83 0 0 1 4.766 4.224 93.983 93.983 0 0 1 4.544 4.475c1.46 1.55 2.873 3.154 4.116 4.906l-0.182-0.145L940 921.5l-8.715-3.544-0.084-0.034-0.098-0.11c-1.368-1.547-2.905-2.955-4.485-4.308-1.583-1.352-3.228-2.636-4.889-3.896a154.889 154.889 0 0 0-5.074-3.67 163.198 163.198 0 0 0-5.19-3.467l-0.16-0.126c-10.039-7.954-21.155-14.521-32.529-20.49a384.725 384.725 0 0 0-17.311-8.484 324.208 324.208 0 0 0-8.792-3.883l-9.001-3.721c-12.111-5.08-24.041-10.69-35.727-17.008-5.839-3.171-11.609-6.527-17.275-10.201-2.831-1.842-5.643-3.753-8.407-5.822a112.246 112.246 0 0 1-4.136-3.231 72.053 72.053 0 0 1-2.07-1.762l-1.057-0.958-0.55-0.523-0.293-0.289-0.395-0.409 2.591 1.957c-2.909-1.328-5.331-2.895-7.575-4.52-2.232-1.632-4.268-3.343-6.195-5.095-3.849-3.508-7.292-7.179-10.564-10.932-3.267-3.755-6.343-7.597-9.303-11.509a257.628 257.628 0 0 1-4.351-5.93 182.788 182.788 0 0 1-2.111-3.025 146.07 146.07 0 0 1-2.115-3.168l-0.626-0.969-0.551-1.864a37.106 37.106 0 0 0-2.567-6.422 34.048 34.048 0 0 0-1.694-2.938 27.981 27.981 0 0 0-0.913-1.325l-0.445-0.581-0.198-0.239-0.075-0.083c-0.011-0.012-0.02-0.021-0.02-0.019 0.009 0.012-0.03-0.031 0.065 0.086l-3.584-4.411 1.452-5.499a20.31 20.31 0 0 1 2.568-5.799 23.363 23.363 0 0 1 3.541-4.261c2.478-2.348 4.961-3.897 7.346-5.159 2.392-1.247 4.716-2.183 7.025-2.965a58.037 58.037 0 0 1 5.244-1.497l0.922-0.207 0.49-0.102 0.634-0.116-3.184 0.962c9.874-4.932 20.025-8.493 30.219-11.316 10.204-2.797 20.462-4.867 30.728-6.485 10.269-1.611 20.549-2.761 30.844-3.555 5.148-0.396 10.301-0.7 15.47-0.913 2.585-0.108 5.173-0.187 7.775-0.229l3.921-0.047 1.986-0.003 2.112 0.02-15.67 16.463a9.13 9.13 0 0 0 0.417 2.155c0.129 0.399 0.213 0.574 0.229 0.637 0.031 0.106-0.167-0.18-0.497-0.548-0.671-0.771-1.802-1.896-3.07-3.012-2.571-2.271-5.714-4.651-8.977-6.943-3.277-2.301-6.726-4.552-10.242-6.738a285.332 285.332 0 0 0-5.325-3.228l-2.683-1.565-2.585-1.461-0.25-0.141-0.881-0.583c-4.926-3.263-9.98-6.524-15.044-9.77l-15.26-9.725a4711.566 4711.566 0 0 0-30.686-19.319l1.813 1.042-5.099-1.962-6.354-2.348-12.97-4.661-26.15-9.186 2.891 0.817c-8.734-1.618-16.971-4.046-24.901-6.956a184.724 184.724 0 0 1-17.436-7.457l-2.888-1.454-1.477-0.777-0.77-0.415-0.934-0.522-0.803-0.448-1.041-0.781a27.581 27.581 0 0 1-2.073-1.717l-0.689-0.647-0.572-0.565a45.45 45.45 0 0 1-1.713-1.835 74.675 74.675 0 0 1-2.412-2.88 141.19 141.19 0 0 1-3.785-4.982 322.988 322.988 0 0 1-6.561-9.392l-3.113-4.673-0.783-1.198-0.103-0.159-0.058-0.09-0.497-0.834-0.185-0.315-0.366-0.628-1.433-2.494a477.232 477.232 0 0 1-5.409-9.813c-6.965-12.972-13.425-25.85-19.8-38.784a3041.978 3041.978 0 0 1-18.767-38.822 4251.901 4251.901 0 0 1-18.262-39.025l-0.329-0.714-0.451-1.293c-10.718-30.718-25.767-60.175-43.55-87.991-8.904-13.908-18.552-27.387-28.749-40.418a510.183 510.183 0 0 0-15.763-19.13c-5.394-6.222-10.951-12.327-16.564-18.089a237.071 237.071 0 0 0-4.137-4.161l-0.479-0.464-0.174-0.167-0.938-0.935-1.07-1.094-2.151-2.179a421.657 421.657 0 0 0-8.775-8.556 426.803 426.803 0 0 0-18.311-16.35 462.859 462.859 0 0 0-39.282-29.649c-13.623-9.193-27.762-17.654-42.237-25.385a428.318 428.318 0 0 0-21.965-10.921 355.173 355.173 0 0 0-11.096-4.895 280.865 280.865 0 0 0-5.51-2.248l-2.696-1.043-2.321-0.854-1.602-0.589-1.141-0.542c0.128 0.061-0.273-0.123-0.867-0.315-0.6-0.199-1.397-0.437-2.285-0.67-1.788-0.47-3.918-0.927-6.153-1.336-4.492-0.824-9.416-1.488-14.417-2.042-5.013-0.554-10.144-1-15.306-1.367a487.998 487.998 0 0 0-7.76-0.488l-3.872-0.197-3.717-0.153 4.103-0.213a57.63 57.63 0 0 1-14.882 0.068 58.294 58.294 0 0 1-14.205-3.656 63.292 63.292 0 0 1-12.314-6.551 65.272 65.272 0 0 1-5.452-4.152 61.834 61.834 0 0 1-2.643-2.375 54.994 54.994 0 0 1-1.367-1.348l-0.745-0.777-0.424-0.458-0.691-0.78 1.577 1.677c-0.912-0.898-2.343-2.11-3.967-3.333a96.797 96.797 0 0 0-5.423-3.783c-3.905-2.546-8.213-5.063-12.66-7.494a326.714 326.714 0 0 0-13.75-7.069 442.732 442.732 0 0 0-7.063-3.357l-3.54-1.619-3.37-1.493-1.504-0.667-0.861-0.483c-5.319-2.986-10.655-5.451-15.524-7.014-2.421-0.779-4.725-1.333-6.681-1.615-1.921-0.298-3.62-0.271-4.124-0.196-0.106 0.011-0.14 0.02 0.048-0.032 0.097-0.029 0.242-0.071 0.536-0.176l0.614-0.241 0.584-0.26 0.548-0.267c-0.328 0.178 1.344-0.706 0.038-0.019-0.035 0.01 0.268-0.148 0.821-0.66 0.533-0.495 1.26-1.393 1.739-2.366 0.495-0.972 0.723-1.918 0.781-2.421 0.085-1.068-0.121-0.361 0.274 1.077 0.352 1.442 1.124 3.527 2.198 5.73 1.071 2.213 2.436 4.592 3.941 6.896a65.634 65.634 0 0 0 2.25 3.235l0.187 0.249-0.659-0.788 0.144 0.167 0.283 0.331 1.074 1.273 1.979 2.417c2.534 3.145 4.859 6.155 7.167 9.173a887.454 887.454 0 0 1 6.775 9.01 2014.012 2014.012 0 0 1 13.186 17.973l6.505 9.001 3.242 4.514 1.842 2.583a81.718 81.718 0 0 1 2.108 3.201c2.602 4.167 4.624 8.053 6.483 11.878 1.847 3.819 3.479 7.561 5.015 11.273 3.059 7.418 5.716 14.726 8.198 22.028a554.95 554.95 0 0 1 6.911 21.91l1.59 5.524 0.78 2.801 0.396 1.455 0.284 1.104 0.07 0.304 0.14 0.609a223.397 223.397 0 0 0 2.475 9.694 229.28 229.28 0 0 0 14.121 37.519c2.898 6.03 6.036 11.946 9.433 17.642a186.91 186.91 0 0 0 5.262 8.338 148.27 148.27 0 0 0 2.732 3.944l1.357 1.853 1.079 1.417-3.229-3.07c4.337 3.42 8.48 7.244 12.317 11.609a78.218 78.218 0 0 1 5.519 7.034 66.522 66.522 0 0 1 2.584 4.026c0.425 0.718 0.848 1.465 1.28 2.279l0.67 1.307 0.368 0.764 0.211 0.458 0.358 0.817-3.35-5.444c2.794 3.354 4.084 6.414 4.918 8.839a32.269 32.269 0 0 1 1.391 6.154c0.428 3.453 0.355 6.013 0.234 8.386-0.293 4.665-0.969 8.406-1.705 12.02-1.509 7.136-3.397 13.494-5.405 19.747a369.235 369.235 0 0 1-6.459 18.215 489.651 489.651 0 0 1-3.497 8.877l-1.815 4.418-1.919 4.527 0.744-2.117c-4.56 14.689-7.125 30.253-8.033 46.109-0.892 15.863-0.118 32.027 2.004 48.073a271 271 0 0 0 4.267 23.879c0.889 3.917 1.852 7.842 2.91 11.555l0.718 2.438 0.959 2.831c0.65 1.877 1.325 3.731 2.024 5.559 2.788 7.271 6.05 14.262 9.745 19.728 1.812 2.7 3.798 4.984 5.32 6.243 0.739 0.629 1.344 0.972 1.437 1.051 0.04 0.045-0.048 0.026-0.387 0.014a6.987 6.987 0 0 0-0.772 0.022 8.698 8.698 0 0 0-1.274 0.206l-0.432 0.108-0.32 0.091c-0.167 0.054-0.174 0.043-0.818 0.27l-9.974 12.609 8.08-57.157c1.874-10.57 5.116-20.777 9.455-30.396a133.137 133.137 0 0 1 7.346-13.998 122.717 122.717 0 0 1 4.347-6.664 106.737 106.737 0 0 1 2.384-3.274l1.279-1.646 0.684-0.847 0.844-1.008 0.429-0.512 0.247-0.23c1.264-1.178 2.624-2.605 3.969-4.099a144.07 144.07 0 0 0 4.036-4.7 222.467 222.467 0 0 0 3.972-4.966 246.029 246.029 0 0 0 3.814-5.04l12.996-17.662 6.755 20.016a970.96 970.96 0 0 0 11.453 32.043 857.305 857.305 0 0 0 12.556 31.637c8.829 20.905 18.418 41.513 29.092 61.574 5.354 10.02 10.92 19.935 16.806 29.667a525.828 525.828 0 0 0 18.605 28.619 398.964 398.964 0 0 0 20.746 27.179 289.798 289.798 0 0 0 11.381 12.808c3.939 4.137 7.977 8.208 12.382 11.887z">
</path>
</symbol>
<symbol id="icon-java" viewBox="0 0 1024 1024">
<path
d="M558.08 472.064c48.128 53.248-13.312 103.424-13.312 103.424s119.808-61.44 65.536-139.264c-51.2-71.68-91.136-107.52 122.88-232.448 0 1.024-335.872 86.016-175.104 268.288"
fill="#FF0000"></path>
<path
d="M610.304 5.12s101.376 101.376-96.256 258.048C356.352 389.12 478.208 460.8 514.048 543.744 420.864 459.776 354.304 386.048 399.36 317.44 463.872 216.064 651.264 166.912 610.304 5.12"
fill="#FF0000"></path>
<path
d="M720.896 757.76c183.296-95.232 98.304-188.416 39.936-175.104-15.36 3.072-21.504 5.12-21.504 5.12s5.12-8.192 16.384-11.264c117.76-40.96 207.872 120.832-37.888 186.368-1.024 0 2.048-3.072 3.072-5.12m-337.92 38.912s-37.888 21.504 26.624 29.696c76.8 8.192 117.76 8.192 202.752-8.192 0 0 23.552 15.36 53.248 26.624-191.488 80.896-433.152-5.12-282.624-48.128m-23.552-106.496s-43.008 31.744 23.552 37.888c82.944 8.192 149.504 10.24 261.12-13.312 0 0 16.384 16.384 40.96 24.576-231.424 68.608-490.496 5.12-325.632-49.152"
fill="#6699FF"></path>
<path
d="M811.008 876.544s27.648 23.552-31.744 40.96c-111.616 34.816-460.8 45.056-558.08 2.048-34.816-15.36 31.744-35.84 51.2-40.96 21.504-5.12 34.816-3.072 34.816-3.072-38.912-28.672-251.904 52.224-107.52 75.776 390.144 62.464 712.704-28.672 611.328-74.752M400.384 578.56s-178.176 43.008-63.488 56.32c49.152 6.144 146.432 5.12 235.52-3.072 73.728-6.144 147.456-19.456 147.456-19.456s-26.624 11.264-45.056 24.576c-181.248 48.128-530.432 26.624-430.08-23.552 88.064-39.936 155.648-34.816 155.648-34.816"
fill="#6699FF"></path>
<path
d="M418.816 1015.808c176.128 11.264 446.464-6.144 453.632-90.112 0 0-13.312 31.744-146.432 56.32-150.528 27.648-336.896 24.576-446.464 6.144 2.048 1.024 24.576 20.48 139.264 27.648"
fill="#6699FF"></path>
</symbol>
</svg>
<script>
//刷新页面时，将首页定向到#home.html
if (window.location.hash == '') {
window.location.href = window.location.href + '#home.html'
} else {
var hash = window.location.hash
window.location.href = window.location.origin
window.location.href = window.location.origin + hash
}
//定义菜单容器
var menu = document.getElementById('menu'), select
//定义页面容器
var iframe = document.getElementsByName('main')[0]
//创建菜单项
var programs = [//菜单参数
{ icon: 'home', title: '首页', href: 'home.html' },
{ icon: 'javascript', title: 'JS', href: 'js.html' },
{ icon: 'node.js', title: 'Node.js', href: 'node.html' },
{ icon: 'mysql', title: 'MySql', href: 'mysql.html' },
{ icon: 'java', title: 'Java', href: 'java.html' }
]
for (var i = 0; i < programs.length; i++) {//创建菜单
var a = document.createElement('a')
a.setAttribute('target', 'main')
a.id = programs[i].href
a.innerHTML = '<svg><use xlink: href="#icon-' + programs[i].icon + '"></use></svg><label>' + programs[i].title + '</label>'
menu.appendChild(a)
}
//当鼠标点击菜单
menu.onclick = function (e) {
//定位鼠标点击目标为菜单项的a标签
var target = e.target
if (target.tagName == 'use') {
target = target.parentNode
target = target.parentNode
} else if (target.tagName == 'svg') {
target = target.parentNode
} else if (target.tagName == 'LABEL') {
target = target.parentNode
} else if (target.tagName == 'A') {
target = target
}
//点击的菜单项添加样式，地址栏添加hash
if (!target.className) {
target.classList.add('click')
window.location.hash = target.id;
if (select) select.classList.remove('click')
select = target
}
}
//当地址栏hash发生改变
window.onhashchange = function (e) {
var path = e.newURL.split('#')[1];
iframe.src = path
var index = programs.findIndex(function (item) {
return item.href == path;
});
if (!menu.children[index].className) {
menu.children[index].classList.add('click')
if (select) select.classList.remove('click')
select = menu.children[index]
}
}
</script>
</body>
</html>
