css 导航，菜单对应页面切换效果实现方法

时间：2022-09-29 19:34:25

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>

相关文章