페이지 이동시 class 혹은 hover 인식시키는법...
본문
<li><a href='<?=$M01[1]?>' target=''>인사말</a></li>
<li><a href='<?=$M01[2]?>' target=''>연혁</a></li>
<li><a href='<?=$M01[3]?>' target=''>조직도</a></li>
<li><a href='<?=$M01[4]?>' target=''>비전</a></li>
<li><a href='<?=$M01[5]?>' target=''>찾아오시는길</a></li>
서브 좌측 메뉴를 이런식으로 사용하고 있습니다.
li 마우스 오버시 색상이 hover 효과로 변경되어 표기되는 방식을 사용중인데... 클릭하고 해당 페이지로 들어가면 해당 li만 변경된 색상이 유지되게 하고싶습니다.
찾아보니 class를 사용해서 if 구문으로 하는것같은데... 아무리 따라해도 안되네요...
몇달몇일을 찾아가면서 해봐도...ㅠㅠ....
간신히 쿠키값을 인식해서 좌측메뉴 hover효과를 유지시켰지만... 메인에서 배너나 다른 링크로 들어가면 좌측메뉴 인식이 안되더군요. class를 지정해서 누르면 딱 그 효과가 나오게 해야되는 것같은데... 4개월째 해결을 못하고 있습니다...ㅠㅠ 일하면서 조금씩 알아보는데 힘에 붙이네요... 답변주시면 정말 감사드립니다!
답변 1
좌측메뉴부분을 뽑아오는 것이 아니라 직접 타이핑하신거라면 해결하는 것은 쉽습니다.
li 요소에 class="active" 와 같은 값을 해당 페이지에만 입력하시면 되죠.
가령 연혁페이지라면,
<li><a href='<?=$M01[1]?>' target=''>인사말</a></li>
<li class="active"><a href='<?=$M01[2]?>' target=''>연혁</a></li>
....
와 같이 클래스를 부여하고, CSS로 스타일링을 하시면됩니다.
li.active { 원하는 효과 } 혹은 li.active a { 원하는 효과 }와 같은 형식이 되겠죠.
답변감사드립니다^^~ 그런데... 하나를 누르면 그 곳에만 active 효과가 적용되고 나머지에는 active효과가 적용되지 않는 방법이 궁금합니다 ㅠㅠ 페이지? 혹은 class를 인식해서 그것만 효과를 주고싶습니다 ㅠㅠ(좌측클릭 메뉴 활성화)
음? 링크를 누르면 페이지 전환되는 것이 아닌가요?
페이지 전환이 되면 해당 페이지의 링크만 active를 가지게 코딩하시면 됩니다.
원하시는 것이 페이지 전환이 아닌 탭메뉴와 같은 형식이라면 jquery 플러그인들의 많은 탭이든 부트스트랩의 탭이든 가져다 쓰시면됩니다.
해당 페이지 만 active되게 하는 법을 모르겠어요... 다른곳에 있는것도 소스 넣어보면 잘 안되고... 아에 제이쿼리 플러그인이나 탭형식으로 만들어 진 것은 따올 수 있는데 위에 소스 보이는 것 처럼 기존에 사용하는 소스에 해당 링크만 active 되게 하려는건 계속 안되네요..ㅠㅠ
복잡하게 생각하지 마시고 좌측메뉴가 필요한 페이지마다 좌측메뉴를 넣으면 쉽습니다.
다만, 좌측메뉴가 수정된다면 좌측메뉴가 들어간 모든 페이지를 수정해야 되니 수정/관리에 적합한 방법은 아니지만, 손쉽게 적용하는 방법입니다.
ex)
- 인사말 페이지
좌측메뉴를 넣고 인사말 페이지의 링크만 active 클래스를 부여합니다.
<li class="active"><a href='<?=$M01[1]?>' target=''>인사말</a></li>
- 연혁 페이지
마찬가지로 좌측메뉴를 넣고 연혁 페이지의 링크만 active 클래스를 부여합니다.
<li class="active"><a href='<?=$M01[2]?>' target=''>연혁</a></li>
자신의 페이지만 링크에 active를 부여하고 나머지 링크에는 active 가 들어가지 않게 하면 됩니다.