實現原理：
- 每個菜單有多個li標簽，每個li標簽含一個id,li標簽的id用來標記：點擊效果
- 每個頁面有一個id，這個id的作用是對應每個li標簽的點擊鏈接對應的頁面，它的作用是用來標記：li標簽的href指向頁面位置
- li標簽的href的指向,通過偽類target指向唯一的頁面id: #app-version:target，如果不打算有點擊效果，可以在兄弟選擇符 ~ 后跟當前 li 標簽的 id;如果想要有點擊效果，則要在兄弟選擇符 ~ 后跟當前li標簽的所有父節點
css:
/*點擊菜單，選中狀態效果*/ #home:target ~ #link-home, #app-version:target ~ #header #navigation #link-portfolio, #app-config:target ~ #header #navigation #link-cpmfig, #app-changelog:target ~ #header #navigation #link-contact, #app-infomation:target ~ #header #navigation #link-infomation, #about:target ~ #header #navigation #link-about{ background: #333; color: #fff;
}
html:
<body>
<!-- 頁面區塊 -->
<div id="home" class="content"></div>
<!-- app版本查詢 -->
<div id="app-version" class="panel"></div>
<!-- app配置版本 -->
<div id="app-config" class="panel"></div>
<!-- app-changelog -->
<div id="app-changelog" class="panel"></div>
<!-- 使用說明 -->
<div id="app-infomation" class="panel"></div>
<!-- 關於我們 -->
<div id="about" class="panel"></div>
<!-- 菜單區塊 -->
<div id="header">
<ul id="navigation">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="link-portfolio" href="#app-version">app版本查詢</a></li>
<li><a id="link-cpmfig" href="#app-config">app配置版本</a></li>
<li><a id="link-contact" href="#app-changelog">change log</a></li>
<li><a id="link-infomation" href="#app-infomation">使用說明</a></li>
<li><a id="link-about" href="#about">關於我們</a></li>
</ul>
</div>
</body>