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. ...
随机推荐
- Java开发之文件上传
文件上传有SmartUpload.Apache的Commons fileupload.我们今天介绍Commons fileupload的用法. 1.commons-fileupload-1.3.1.j ...
- 第二章《深入C#数据类型》项目经理评分
一:创建MyOffices项目,创建UserInfo类,用来存储员工 工号,姓名,年龄,评价,年度得分 二:创建查看评分窗体(frmShow),添加定义员工数组,将员工数据绑定到frmShow窗体的L ...
- u3d_小游戏_拼图_1_生成碎片(非随机)
http://blog.csdn.net/cube454517408/article/details/7907247 首先是参考此文: main.cs作用:1.大图的拆分 2.判断是否成功 3.对碎 ...
- [No00004F]史上最全Vim快捷键键位图（入门到进阶）
史上最全Vim快捷键键位重磅来袭!!学习Linux的朋友看过来啦,你是不是觉得Linux编辑器Vim操作复杂,步骤繁琐呢?Linux工程师是不是想大幅度提升自己的工作效率呢? 经典版 下 ...
- java代码封装与编译
代码封装: 在这个java程序内调用另一个类 在arrayTool中把这两个函数封装起来. 编译顺序:(由下文可知应该是先进行语法检查再进行编译) 先编译ArrayTool再编译ArrayOperat ...
- appid账号创建及A D-U-M-S码创建
APPID 企业账号创建流程及A D-U-N-S® Number 码创建(需要等2到3周时间,可以先创建成个人账号然后升级成公司账号) 021 26107504 邓白氏编码 1.需要VISI ...
- wget: unable to resolve host address的解决方法
摘要:wget:无法解析主机地址.这就能看出是DNS解析的问题. wget:无法解析主机地址.这就能看出是DNS解析的问题. 解决办法: 登入root(VPS).进入/etc/resolv.conf. ...
- Discuz封锁蜘蛛最有效的方法
闲来无事翻代码,发现一个好东西,Discuz设计者考虑到了有些流氓搜索引擎不遵守roborts.txt,于是设计了一个NOROBOT变量,当这个变量为true 的时候,定义中的搜索引擎都会无法访问,默 ...
- DWZ-JUI 树形Checkbox组件 无法一次获取所有选中的值的解决方法
UI中 tree Checkbox 组件 在官方文档中提供的oncheck事件中只能够获取当前点击的权限值,而无法获取其他选中的值 <ul class="tree treeFolder ...
- JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...