자바스크립트 클릭이벤트 질문입니다.
본문
먼저 코드를 보여드리면,
<ul class="menu-wrap">
<li>menu01</li>
<li>menu02</li>
<li>menu03</li>
<li><a href="https://도메인.co.kr/areasearch/제주">제주</a></li>
</ul>
<script type="text/javascript">
const menuWrap = document.querySelector('.menu-wrap');
function select(ulEl, liEl){
Array.from(ulEl.children).forEach(
v => v.classList.remove('selected')
)
if(liEl) liEl.classList.add('selected');
}
menuWrap.addEventListener('click', e => {
const selected = e.target;
select(menuWrap, selected);
})
</script>
이런 코드를 가지고와서 사용할려고하는데
li태그에는 잘 작동합니다. 클릭하면 selected 클래스가 붙어서 작동하고 하는데
마지막에 a태그를 넣은 li는 작동이 안됩니다..
li영역부분을 클릭하면되는데 a태크를 클릭하면 페이지 이동만 되고 selected 클래스도 안붙고 작동이 안됩니다ㅠㅠ 왜 그러는지 아시는 분 계실까요ㅠ
답변 2
글만으로는 설명이 힘들어 아래 설명을 이해 못 하실 듯 합니다만 도움이 되고자 답변을 달겠습니다.
저 코드는 javascript로 메뉴 클릭 시 페이지 이동 없이 tab을 활성화/비활성화 코드이지,
페이지 이동 후 자동으로 해당 메뉴를 활성화 해주는 코드가 아닙니다.
저런 javascript 는 화면안에서 페이지 이동없이 tab 별로 특정 content 를 보여주기 위해서 사용합니다.
원하 시는 코드가 아닐 것 입니다.
페이지 이동 후 해당 메뉴가 활성화 표시되기 위해선 php 코드나, 좀 더 고도화된 javascript 가 필요합니다.
아.. 그렇군요ㅠㅠ 저것도 구글링하다 겨우 찾은 코드인뎁ㅠㅠ 다시 검색해봐야겠네요..
죄송하지만 혹시 뭐라고 검색을해야 제가 원하는 비슷한게 나올까요?
페이지 안에서가 아닌 페이지 이동 후 원하는 버튼에 원하는 css 를 먹이려면
클래스명을 php 겟변수로 전송하거나 js 세션스토리지나 로컬스토리지로 전송하는 테크닉과
전송받은 정보를 구현하는 테크닉이 필요합니다만...
그런 방식을 예제로 구성하여 답변글로 올리기에는 분량과 시간소모 문제 때문에 대답하기가 어렵습니다.^^
간단한 문제가 아니였군요..ㅠㅠ 좀 더 검색해봐야겠네요
답변 감사합니다!!