实现原理：

  • 每个菜单有多个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>

css 导航，菜单对应页面切换效果实现方法的更多相关文章

  1. 教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜

    因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...

  2. html5各种页面切换效果和模态对话框

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  3. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  4. [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  6. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  7. 强烈推荐一款CSS导航菜单

    强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...

  8. 在uwp仿IOS的页面切换效果

    有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...

  9. [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. 第10章 同步设备I/O和异步设备I/O（1）_常见设备及CreateFile函数

    10.1 打开和关闭设备 10.1.1 设备的定义——在Windows中可以与之进行通信的任何东西. (1)常见设备及用途 设备 用途 用来打开设备的函数 文件 永久存储任何数据 CreateFile ...

  2. 南邮oj[1401] 乘车费用

    Description lqp家离学校十分十分远,同时他又没有钱乘taxi.于是他不得不每天早早起床,匆匆赶到公交车站乘车到学校.众所周知CZ是个公交车十分发达的地方,但是CZ的公交车十分的奇怪,lq ...

  3. jQuery $.each用法

    以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 好文要顶 关注我 收藏该文   mabel_on_lin ...

  4. Oracle 多表update

    今天凌晨因为要在数据库里做一些操作,是关于两表关联的update,但语句怎么写都不正确,老是报错,于是心惊肉跳(就怕不能及时完成操作)去查了一下,NND,原来把SQL写成了在SQL Server下面的 ...

  5. wget: unable to resolve host address的解决方法

    摘要:wget:无法解析主机地址.这就能看出是DNS解析的问题. wget:无法解析主机地址.这就能看出是DNS解析的问题. 解决办法: 登入root(VPS).进入/etc/resolv.conf. ...

  6. 使用bootstrap-table简化CRUD

    1. 引入bootstrap-table资源包, 页首引用css, 页脚引用js 2. table 参数说明 data-toggle="table" data-toolbar=&q ...

  7. f2fs中node page的lock_page

    [都是思想片段, 待好好整理] node page的lock_page首先是为了改变page的状态:set_page_dirty, 还有set_nid操作时也会设置父节点的nid, 但是这样设置nod ...

  8. Codevs1026 逃跑的拉尔夫

    题目描述 Description 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆车,但他没想到的是那辆车属于警察局,并且车上装有用于发射车子移动路线的装置. 那个装置太旧了,以至于只能发射关于那辆车的移动 ...

  9. UOJ #150 【NOIP2015】 运输计划

    题目描述 公元 \(2044\) 年,人类进入了宇宙纪元. \(L\) 国有 \(n\) 个星球,还有 \(n-1\) 条双向航道,每条航道建立在两个星球之间,这 \(n-1\) 条航道连通了 \(L ...

  10. pip安装包报错：Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat

    pip安装包报错:Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat Windows7下pip安装包报错:Microso ...