본문 바로가기
웹 코딩/티스토리

북클럽 스킨 - GNB 메뉴 현위치 버그

by 알릭2 2020. 9. 6.

홈은 왜 늘 강조되어 있나!?

 

상단 메뉴에서 현재 페이지를 강조해주는 스크립트에 오류가 있어 수정했습니다.

 

오류 증상

  • 원래 의도한건지 모르겠는데 '홈'은 늘 불이 들어옵니다. (대체 왜...?? 심지어 글을 읽을때도!?)
  • 메뉴에 페이지라던가 어떤 항목을 추가하면 추가된 메뉴엔 불이 안들어옵니다.
  • 페이지 로딩이 다 된 후 강조가 처리되서 늦게 불이 들어오는 것도 마음에 안듭니다.

그래서 스킨의 기본 script.js 를 아래와 같이 수정했습니다.

 

[원래 코드]

		$(window).on("load", function(){
			$gnb.find("li").each(function(){
				gnbWidth  = gnbWidth + $(this).outerWidth() + 1;
				if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){
					$(this).addClass("current");
				}
			});
			$gnb.find("ul").width(gnbWidth);

			if ( $gnb.width() < $gnb.find("ul").width() && $gnb.find(".current").length ){
				var scrollPos = $gnb.find(".current").prev().length ? $gnb.find(".current").prev().position().left : $gnb.find(".current").position().left;
				$gnb.scrollLeft( scrollPos );
			}
		});

[수정한 코드]

		$gnb.find("li").each(function(){
			var href = $(this).find('a').attr('href');
			if (href == window.location.pathname) {
				$(this).addClass("current"); return false;
			}
			if (href.indexOf(window.location.pathname) > -1 ){
				$(this).addClass("current"); return false;
			}
		});
			
		$(window).on("load", function(){
			$gnb.find("li").each(function(){
				gnbWidth  = gnbWidth + $(this).outerWidth() + 1;
			});
			$gnb.find("ul").width(gnbWidth);
			if ( $gnb.width() < $gnb.find("ul").width() && $gnb.find(".current").length ){
				var scrollPos = $gnb.find(".current").prev().length ? $gnb.find(".current").prev().position().left : $gnb.find(".current").position().left;
				$gnb.scrollLeft( scrollPos );
			}
		});

 

설명:

  • 원래코드의 15-17번줄을 지움
  • 현위치 강조하는 기능을 $(window).on("load" 위로 빼줌
  • 위치 강조는 주소에 맞춰 잘 작동하도록 수정

 

파일 덮기:

기존에 수정한 내용이 따로 없으시면 그냥 편하게 아래 파일을 다운받아 스킨에 업로드 시켜버리면 됩니다.

script.js
0.01MB

댓글