Html 클릭시 변하는데 페이지 이동해도 남아있게끔하려면...

조회수 10865회

변경하려는 버튼을 클릭하면 버튼 색상이 변하면서 페이지가 이동하지만 변경된 색상이 유지되게하려면 어떻게 해야되는지 궁금합니다...

예를 들어 옥션 모바일웹 페이지에 보면 상단에 카테고리를 클릭하면 페이지는 이동하면서 빨간 색상이 표시되면서 유지되는데 방법이 궁금합니다..

그냥 jquery에서 변경될 view에 변경만 시켜주면 유지가 되는것인지...

답변 꼭좀 부탁드립니다.

1 답변

  • 좋아요

    3

    싫어요
    채택 취소하기

    옥션 모바일의 소스를 보니 다음처럼 되어 있네요.

    <li class="list-item">
      <a href="http://mobile.auction.co.kr/SmartDelivery" onclick="pvprofiler.sendEvt('click','1A1D','smartdelivery');"><span class="category-txt">스마트배송</span></a>
    </li>
    <li class="list-item active">
      <a href="http://mobile.auction.co.kr/MartOneday" onclick="pvprofiler.sendEvt('click','1A1E','martoneday');"><span class="category-txt">당일배송</span></a>
    </li>
    

    두 번째 <li>에 'active' 클래스가 있어서 빨간색으로 표시되는건데요. CSS는 이렇게 되어 있군요.

    .list-item.active .category-txt {
        color: #e63740;
    }
    

    보통 이런걸 구현할때는 jQuery보단 JSP같은 서버 언어로 완성된 HTML을 만드는 방식이 수월합니다. 예를 들어 JSP는:

    <li class="list-item ${myCondition eq 'home' ? 'active' : ''}">
      <!-- 생략 -->
    </li>
    

    와 같은 방식으로 요청된 URL에 따라 조건을 걸어서 'active' 클래스를 줬다 뺏었다 하는게 되겠죠. jQuery라면:

    if (location.pathname.indexOf('questions') != -1) {
      $('#targetListTag').addClass('active');
    }
    

    이런식으로 하면 됩니다.

    • 질문하는 저도 어렵게 질문했는데... 감사합니다! 혹시 타 페이지의 HTML, CSS 를 확인하는 방법이 있는건가요? 어떻게 하신건지 궁금하네요... ssangyongttt 2017.2.10 13:49
    • 크롬 브라우저에서 오른쪽마우스 > 검사 (inspect) 알 수 없는 사용자 2017.2.10 14:57
    • 그렇군요! 모두 감사합니다^^ ssangyongttt 2017.2.10 15:05

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)