首部菜单栏的选中逻辑

iTimeTraveler · Apr 6, 2017 · b80e2d1 · b80e2d1
1 parent ff5c62b
commit b80e2d1
Showing 1 changed file with 30 additions and 18 deletions.
diff --git a/source/js/main.js b/source/js/main.js
@@ -1,26 +1,38 @@
+(function(){
 
-// Highlight current nav item
-var hasCurrent = false;
-$('#main-nav > li').each(function () {
-	var url = window.location.href;
-	var matchKey;
-	for (key in themeMenus) {
-		if (url.match(new RegExp('^http(s)?://.+' + key + '/.*'))){
-			matchKey = key;
-			break;
-		}
+	// Highlight current nav item
+	var hasCurrent = false;
+
+	//把相对路径解析成绝对路径
+	function absolute(href) {
+	    var link = document.createElement("a");
+	    link.href = href;
+	    return (link.protocol+"//"+link.host+link.pathname+link.search+link.hash);
 	}
-	if(themeMenus[matchKey] == $(this).text().trim()){
-		$(this).addClass('current-menu-item current_page_item');
-		hasCurrent = true;
-	} else {
+
+	//移出所有的菜单的选中样式
+	$('#main-nav > li').each(function(){
 		$(this).removeClass('current-menu-item current_page_item');
+	});
+	var links = $('#main-nav > li > a');
+	var urls = window.location.href;
+	//为什么要从后面往前面遍历？因为首页极有可能是https://xxxxx/,
+	//这样的话肯定能够匹配所有的项
+	for (var i = links.length; i >= 0; i--) {
+		if(urls.indexOf(absolute(links[i])) != -1){
+			$(links[i]).parent().addClass('current-menu-item current_page_item');
+			//为什么还要设置hasCurrent？因为不排除首页是
+			//https://xxxx/index.html格式的
+			hasCurrent = true;
+			break;
+		}		
 	}
-});
 
-if (!hasCurrent) {
-	$('#main-nav > li:first').addClass('current-menu-item current_page_item');
-}
+
+	if (!hasCurrent) {
+		$('#main-nav > li:first').addClass('current-menu-item current_page_item');
+	}
+})();