• 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>
  • 相关阅读:
    The Preliminary Contest for ICPC China Nanchang National Invitational and International Silk-Road Programming Contest
    HDU 5299 Circles Game
    UVALive
    算法笔记--匈牙利算法
    算法笔记--Splay && Link-Cut-Tree && fhq _treap
    P2685 [TJOI2012]桥
    2017-2018 ACM-ICPC German Collegiate Programming Contest (GCPC 2017)
    ACM-ICPC2018南京赛区 Mediocre String Problem
    Project Euler 345: Matrix Sum
    算法笔记--manacher算法
  • 原文地址:https://www.cnblogs.com/baiyygynui/p/5873312.html
Copyright © 2020-2023  润新知