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