網頁菜單點擊顯示選中狀態的幾種方案

在網頁開發中主頁一般的呈現方式有倆種：

       一種面向大衆用戶的企業官網，一般頁面的菜單模板式開發的，每個菜單項都是一個單獨的頁面，可是頁面的頭尾以及菜單內容都同樣，這種佈局呈現方式，咱們點擊每個菜單項都會發現瀏覽器的地址欄有變化。另外一種是企業內部管理系統的主菜單，這種系統大多數會將菜單佈局只在一個主頁面或者一個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");
	  })
  });