리스트 페이지 이동 자바스크립트 질문입니다. 채택완료
코쟁히
3년 전
조회 5,788
</p>
<p><ul>
<li>
<a href="도메인/전국">전국</a>
</li>
<li>
<a href="도메인/서울">서울</a>
</li>
<li>
<a href="도메인/경기">경기</a>
</li>
<li>
<a href="도메인/인천">인천</a>
</li>
</ul></p>
<p> </p>
<p><style></p>
<p>.rightbox > ul > li > a {
display:block;
border: 1px solid #eee;
border-radius: 5px;
transition: all 0.3s ease;
}</p>
<p></style></p>
<p>
위 코드가 있는데 자바스크립트 이용해서 클릭한 리스트 border-color를 바꿔줄려고하는데 어떻게 해야될까요? 그리고 페이지 이동이 되다보니 유지가 안될꺼같은데 유지할 수 있는 방법도 있을까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
3년 전
위 설명이 복잡한거같아서
대충 예시코드 드려봅니다
코드 실행은 안해봤어요 그냥 쓴거라서
</p>
<p><?php</p>
<p>// 이런식으로 현재 메뉴에 대한 정보를 변수 저장
// 그냥 get변수 바로 사용해도 상관없음
$cur_menu = $_GET['menu'];</p>
<p>?></p>
<p><style type="text/css">
li a.on {color: red;}
</style>
<ul>
<!-- php if else 사용 -->
<?php if ($cur_menu == 'A'): ?>
<li><a href="도메인?menu=A" class="on">A</a></li>
<?php else: ?>
<li><a href="도메인?menu=A">A</a></li>
<?php endif ?></p>
<p> <!-- 아니면 삼항연산자 사용해도 됨, 이게 편합니다. -->
<li><a href="도메인?menu=B" class="<?php echo $cur_menu == 'B' ? 'on' : ''; ?>">B</a></li>
<li><a href="도메인?menu=C" class="<?php echo $cur_menu == 'C' ? 'on' : ''; ?>">C</a></li>
</ul>
<script type="text/javascript">
// 혹은 페이지가 전부 로드 된 후 js 를 사용해 처리 해도 됨</p>
<p> // php 변수를 직접 js 변수로 대입하거나
var curMenu = '<?=$_GET['menu']?>';</p>
<p> // location href 의 값을 파싱해 메뉴 get변수 값을 가져올수 있습니다. (귀찮아서 생략)
// var curMenu = '~~~~~';</p>
<p> $('li a').each(function() {
if ($(this).text() == curMenu) {
$(this).addClass('on');
}
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
코쟁히
3년 전
�
폭주죽
3년 전
제가 그누보드 짧은url 인가 그부분을 익숙치않아서 정확하게 답변을 못드리는데,
핵심은 뭐냐면 php 에서 가져오던, js에서 가져오던 지금 현재의 url 을 가져와서
그 값으로 현재 어떤메뉴가 클릭되어있는지를 알아내서
html 로 표시해주는것입니다
소스상으로 도움이 더 필요하시면 쪽지주시거나 하시면.. 더 도와드릴게요 ㅎㅎ
핵심은 뭐냐면 php 에서 가져오던, js에서 가져오던 지금 현재의 url 을 가져와서
그 값으로 현재 어떤메뉴가 클릭되어있는지를 알아내서
html 로 표시해주는것입니다
소스상으로 도움이 더 필요하시면 쪽지주시거나 하시면.. 더 도와드릴게요 ㅎㅎ
댓글을 작성하려면 로그인이 필요합니다.
3년 전
페이지 하단에 스크립트를 추가해서 페이지가 로드된 후
현재 페이지 url 을 가져와서 그에 맞는 li 에 스타일을 직접 추가하거나,
혹은 미리 클래스 스타일을 정의해놓고 active , on 등의 클래스를 추가해서 표시하는방법이 있구요,
아니면 php 쪽에서 url 이나 get 변수 등으로 현재 페이지 값 저장한 뒤에
html 만들어줄때 if 등을 사용해서 해당하는 요소에 스타일 추가해서 바로 출력하는 방법도 있습니다 ~
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 3개
�
코쟁히
3년 전
답변 감사합니다ㅠ 근데 제가 찾고있는 방법이 아니네요ㅠㅠ 저는 자바스크립트 click on 이용해서 하는 방법을 찾고 있습니다ㅠ
�
엑스엠엘
3년 전
페이지가 바뀌어도 유지하려면 해당 내용을 저장해야 하는데
이런 정보가 한 페이지만 있다면 괜찮은데
두 페이지 이상이 되면 복잡해 지기 시작합니다.
이런 정보가 한 페이지만 있다면 괜찮은데
두 페이지 이상이 되면 복잡해 지기 시작합니다.
�
엑스엠엘
3년 전
아 이제 지금 메뉴고
클릭한 페이지가 아니면
현재 페이지에 해당하는 메뉴를 눈에 띄게 표시하는 거였군요.
클릭한 페이지가 아니면
현재 페이지에 해당하는 메뉴를 눈에 띄게 표시하는 거였군요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
말씀해주신 그대로 복사해서 붙혀넣으니 잘 작동이됩니다.
근데 li안에 a태그에 제 사이트 주소를 넣으니 작동이 안됩니다.
[code]
<li><a href="도메인?menu=B" class="<?php echo $cur_menu == 'B' ? 'on' : ''; ?>">B</a></li>
<li><a href="도메인?menu=C" class="<?php echo $cur_menu == 'C' ? 'on' : ''; ?>">C</a></li>
[/code]
이 부분에서
[code]
<li><a href="https://******.co.kr/areasearch/apple" class="<?php echo $cur_menu == 'B' ? 'on' : ''; ?>">B</a></li>
<li><a href="도메인?menu=C" class="<?php echo $cur_menu == 'C' ? 'on' : ''; ?>">C</a></li>
[/code]
이렇게 도메인 주소를 넣으니 작동이 안되네요ㅠㅠ