css导航，菜单对应页⾯切换效果实现⽅法
实现原理：
每个菜单有多个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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。