网页菜单点击显示选中状态的几种方案

2019独角兽企业重金招聘Python工程师标准>>>

在网页开发中主页通常的呈现方式有俩种：

       一种面向大众用户的企业官网，通常页面的菜单模板式开发的，每一个菜单项都是一个单独的页面，但是页面的头尾以及菜单内容都一样，这种布局呈现方式，我们点击每一个菜单项都会发现浏览器的地址栏有变化。另一种是企业内部管理系统的主菜单，这种系统大多数会将菜单布局只在一个主页面或者一个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");
	  })
  });

 

转载于:https://my.oschina.net/u/1760791/blog/738052