상단 메뉴에서 현재 페이지를 강조해주는 스크립트에 오류가 있어 수정했습니다.
오류 증상
- 원래 의도한건지 모르겠는데 '홈'은 늘 불이 들어옵니다. (대체 왜...?? 심지어 글을 읽을때도!?)
- 메뉴에 페이지라던가 어떤 항목을 추가하면 추가된 메뉴엔 불이 안들어옵니다.
- 페이지 로딩이 다 된 후 강조가 처리되서 늦게 불이 들어오는 것도 마음에 안듭니다.
그래서 스킨의 기본 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" 위로 빼줌
- 위치 강조는 주소에 맞춰 잘 작동하도록 수정
파일 덮기:
기존에 수정한 내용이 따로 없으시면 그냥 편하게 아래 파일을 다운받아 스킨에 업로드 시켜버리면 됩니다.
'웹 코딩 > 티스토리' 카테고리의 다른 글
태그 - 강조 차등 적용 (+ 보너스) (3) | 2020.09.07 |
---|---|
댓글 (+방명록) - URL 처리 (링크 및 이미지 적용) (5) | 2020.09.07 |
북클럽 스킨 - 포인트컬러 활용 '더' 하기 (0) | 2020.09.06 |
북클럽 스킨 - 댓글 버그 수정 (8) | 2020.09.04 |
퀵점프 - 본문용 책갈피? 목차? 바로가기? (6) | 2020.09.02 |
댓글