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>
css 导航，菜单对应页面切换效果实现方法的更多相关文章
- 教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜
因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...
- html5各种页面切换效果和模态对话框
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...
- 基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览 源码下载 HTML wrappe ...
- [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )
1.页面切换(data-transition)
- 强烈推荐一款CSS导航菜单
强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...
- 在uwp仿IOS的页面切换效果
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...
- [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
随机推荐
- vmware虚拟机 32位Ubuntu 安装matlab_R2012A问题小记
最近由于学校课程的需要,所以在Ubuntu上捣腾了一下matlab,经历曲折,记录一下,希望能让大家少跳点坑.先分享一个有效的下载链接: http://www.matlab.org.cn/Downlo ...
- netty5和4.x,3.x的一些区别
http://item.congci.com/item/netty-5-0-4-0-xin-bianhua-he-zhuyi-dian
- SecurityError Error 2148 SWF 不能访问本地资源
错误提示: SWF 文件不能被本地访问 不能访问本地 只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源 错误信息: SecurityError: Error #2148: ...
- AppStore 上架注意事项及错误修改
1.上架之前首页要配置好发布证书,配置用于发布的配置文件. 2.必须上传3.5英寸和4英寸图片,这两种图片尺寸不能缺. 3.提交的版本必须是在8.0及以上的版本. 4.必须用发布证书,如果提示UUID ...
- javascript中的链表结构—从链表中删除元素
1.概念 上一个博文我们讲到链表,其中有一个方法remove()是暂时注释的,这个方法有点复杂,需要添加一个Previous()方法找到要删除的元素的前一个节点,这一个博文我们来分析一下这个remov ...
- 在PHP中无法连接Memcached的解决办法
Memcached 已经正确安装配置, 并且防火墙也已经打开了本机对自己所有端口的访问, telnet localhost 11211也正常, 但是通过PHP访问出现 [Sat May 17 22:0 ...
- C#中excel导入sql
using Microsoft.Office.Interop.Excel; public int ledinExcel(string file, object sender, EventArgs e) ...
- 【WPF】TextBox样式重写注意事项
1.普通控件重写需要添加一行 <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="C ...
- NET WebApi OWIN 实现 OAuth 2.0
NET WebApi OWIN 实现 OAuth 2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和 ...
- opencv 中对一个像素的rgb值或像素值进行操作的几个常用小办法【转】
You can access the Image pixels in many ways:1. One using the Inbuilt macro2. One using the pointer ...