페이지마다 해당 메뉴명에 색상 다르게 주기(속성값에 문자열이 포함확인)

상황:

페이지 이동때마다 새로고침되는 쇼핑몰 이용중 고정 사이드 메뉴 색상을 바꿔줘야 함

꼼수:

url 주소에 따라 클래스 추가하기 (페이지 뒤에 주소 두자리를 받아서 이용)

 

//1.
$(function(){
    const linkUrl =  document.location
    const link =  linkUrl.pathname
    var arSplitUrl   = link.split("/");  //(4) ['', 'myshop', 'addr', 'list.html']
    var nArLength     = arSplitUrl.length; //4
    var arFileName         = arSplitUrl[nArLength-1];   //list.html
    var arSplitFileName     = arFileName.split(".");  //(2) ['list','html']
    var sFileName = arSplitFileName[0];      //list
    var sFileExtension = arSplitFileName[1] html
    $(".cus_myshopArea_lists.myshopMain ul li a[href*='"+arSplitUrl[nArLength-2]+'/'+ sFileName +"']").addClass('on')
});


//2.
//더 간단하게 하면
$(function(){
    const link =  document.location.pathname
     $(".cus_myshopArea_lists.myshopMain ul li a[href*='"+link+"']").addClass('on')
});


//3.쿼리스트링이 붙는경우가 있다면
//뒤에 search?w=tot&DA=YZR&...처럼 쿼리스트링이 붙는다면 키와값을 추출해서 조건으로
    
   $(function(){
  	const linkUrl =  document.location
    const link =  linkUrl.pathname
    const arSearch = linkUrl.search
    
     if(!arSearch){
        $(".cus_myshopArea_lists.myshopMain ul li a[href*='"+link+"']").addClass('on')
    }else if(getQueryString("mode")=='cs'){
        $('.cus_myshopArea_lists ul li dl dd a:eq(9)').addClass('on')
    }
}); 
    
 function getQueryString(key) {
    var str = location.href;
    // QueryString의 값을 가져오기 위해서, ? 이후 첫번째 index값을 가져온다.
    var index = str.indexOf("?") + 1;
    // Url에 #이 포함되어 있을 수 있으므로 경우의 수를 나눴다.
    var lastIndex = str.indexOf("#") > -1 ? str.indexOf("#") + 1 : str.length;
    // index 값이 0이라는 것은 QueryString이 없다는 것을 의미하기에 종료
    if (index == 0) {
        return "";
    }
    // str의 값은 a=1&b=first&c=true
    str = str.substring(index, lastIndex); 
    // key/value로 이뤄진 쌍을 배열로 나눠서 넣는다.
    str = str.split("&");
    // 결과값
    var rst = "";
    for (var i = 0; i < str.length; i++) {
        // key/value로 나눈다.
        // arr[0] = key
        // arr[1] = value
        var arr = str[i].split("=");
        // arr의 length가 2가 아니면 종료
        if (arr.length != 2) {
            break;
        }
        // 매개변수 key과 일치하면 결과값에 셋팅
        if (arr[0] == key) {
            rst = arr[1];
            break;
        }
    }
    return rst;
}

 

 

포인트는 요소(element) 에서 속성값에 문자열이 포함되어 있는지 찾기

   ' a[href*= '  이부분인데  응용하면

//javascript
document.querySelectorAll(".tit[data-group*='abc']");
 
// jquery
$(".tit[data-group*='abc']");

1. tit클래스를 찾기
2. data-group 속성값이
3. abc 문자열이 포함된 요소 찾아라

[attr*=value]에 관한 내용은 아래

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

특성 선택자 - CSS: Cascading Style Sheets | MDN