网页菜单点击显示选中状态的几种方案
2016-08-25 00:00
281 查看
在网页开发中主页通常的呈现方式有俩种:
一种面向大众用户的企业官网,通常页面的菜单模板式开发的,每一个菜单项都是一个单独的页面,但是页面的头尾以及菜单内容都一样,这种布局呈现方式,我们点击每一个菜单项都会发现浏览器的地址栏有变化。另一种是企业内部管理系统的主菜单,这种系统大多数会将菜单布局只在一个主页面或者一个tab页签面板上,浏览时发现点击任何页面,只要不开新窗口,发现地址栏几乎没有变化。
下面针对这两情况,如何来解决菜单选中。
1.官网类方案一
官网的菜单布局如果是将菜单部分代码copy到每个页面,那只需在对本页对应的导航的a标签上 想要的样式即可,其他菜单对应的a标签去除相应的样式
2.官网类方案二
如果是页面采用模本开发,菜单通过导入,或者采用静态的模本同步开发机制,菜单作为公共部分被include或者被开发同同步到各个静态页面。这种情况要实现菜单选中显然就采用js去完成了。
这种情况如果为了简单可以采用bootstrap去进行菜单的布局,引入bootstrap的js库可以很轻松的搞定。网上很多官网模板采用这种方式,可参考其他模本,不再介绍
另一种是自己编写js去实现,思路是通过location.href获取连接地址最后一个斜杠后的字符串,返回菜单链接的文本类容一次对比,发现相同则通过js给该链接动态添加样式。这个思路我觉得有些奇怪,起因是同事用替换型模板写了两个页面,然后自己写了一段很简短的js去实现菜单点击选中,最后失败了,问我怎么回事,我当时有点蒙了对于文件组成也不太清楚,所以当时没有发现问题,那段代码用于菜单导航只在一个页面的情况没有问题的,最后我只能调试发现js的执行不可控了一晃而过。然后我想出了这种思路,后面通过上网查询确实有这样的使用方式。
3.后台类菜单
这种菜单只在一个固定文件中的,其实就很好控制了
一种面向大众用户的企业官网,通常页面的菜单模板式开发的,每一个菜单项都是一个单独的页面,但是页面的头尾以及菜单内容都一样,这种布局呈现方式,我们点击每一个菜单项都会发现浏览器的地址栏有变化。另一种是企业内部管理系统的主菜单,这种系统大多数会将菜单布局只在一个主页面或者一个tab页签面板上,浏览时发现点击任何页面,只要不开新窗口,发现地址栏几乎没有变化。
下面针对这两情况,如何来解决菜单选中。
1.官网类方案一
官网的菜单布局如果是将菜单部分代码copy到每个页面,那只需在对本页对应的导航的a标签上 想要的样式即可,其他菜单对应的a标签去除相应的样式
<div class="nav"> <a href="demo1.html" class="current">第一页</a> <a href="demo2.html" >第二页</a> </div>
2.官网类方案二
如果是页面采用模本开发,菜单通过导入,或者采用静态的模本同步开发机制,菜单作为公共部分被include或者被开发同同步到各个静态页面。这种情况要实现菜单选中显然就采用js去完成了。
这种情况如果为了简单可以采用bootstrap去进行菜单的布局,引入bootstrap的js库可以很轻松的搞定。网上很多官网模板采用这种方式,可参考其他模本,不再介绍
另一种是自己编写js去实现,思路是通过location.href获取连接地址最后一个斜杠后的字符串,返回菜单链接的文本类容一次对比,发现相同则通过js给该链接动态添加样式。这个思路我觉得有些奇怪,起因是同事用替换型模板写了两个页面,然后自己写了一段很简短的js去实现菜单点击选中,最后失败了,问我怎么回事,我当时有点蒙了对于文件组成也不太清楚,所以当时没有发现问题,那段代码用于菜单导航只在一个页面的情况没有问题的,最后我只能调试发现js的执行不可控了一晃而过。然后我想出了这种思路,后面通过上网查询确实有这样的使用方式。
$(function(){ var url = window.location.href; var fileName = url.substring(url.lastIndexOf('/')+1); $(".nav a").each(function(){ var $me = $(this); var text = $me.attr("href"); if(text==fileName){ $me.addClass("me"); } }) });
3.后台类菜单
这种菜单只在一个固定文件中的,其实就很好控制了
$(function(){ $(".nav a").on("click",function(){ $(this).addClass("current").siblings().removeClass("current"); }) });
相关文章推荐
- CMenu CreatePopupMenu AppendMenu显示菜单是灰色不可点击状态?
- js实现导航菜单点击切换选中时高亮状态——方法二
- 用js实现导航菜单点击切换选中时高亮状态
- android gridview默认显示部分数据,点击按钮显示全部,再点击回到默认状态,选中变颜色
- tableview在编辑状态下,左侧的UIControl【显示选中圆圈的地方点击不能出触发didselected方法】
- 用js实现导航菜单点击切换选中时高亮状态
- js实现导航菜单点击切换选中时高亮状态
- jq点击显示隐藏二级菜单的几种方法
- android-多个listview菜单数据点击item项保留选中状态问题
- 增加工具栏提示&修改程序字体&设置文档标题&控制窗口显示&更新菜单选中/不选中状态
- jq与JS点击显示隐藏二级菜单的几种方法
- jquery实现导航菜单点击切换选中时高亮状态
- [转]当鼠标点击ListView下面的空白区域时,如何使ListView的原item选项仍然为选中状态
- dedecms5.3 会员登陆后返回网页显示登陆状态方法
- 实现审核状态显示,选中行颜色变化功能。
- IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
- 点击CListCtrl空白后,原来选中的ITEM仍处于被选中状态
- 网页中禁止右键和禁止状态栏显示地址
- ASP.NET - 演练:在网页上显示菜单
- 禁用IE的后退按钮|显示网页已过期|几种语言的实现方法|c#|javascript|html