2021-04-17
Photo by Gontran Isnard on Unsplash
<a> 태그를 이용하여 링크를 부여하는 방식이 일반적이나, 제이쿼리 내부에서도 이벤트를 걸어서 링크를 부여할 수 있다. 오늘은 그 방법을 알아보도록 하자.
- 예제 코드
예제 코드는 3개의 버튼을 만들고 각 버튼에 검색 포털 사이트로 가는 링크를 걸어 두었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnN").click(function(){
$(location).attr("href", "https://www.naver.com/")
})
$("#btnD").click(function(){
$(location).attr("href", "https://www.daum.net/")
})
$("#btnG").click(function(){
$(location).attr("href", "https://www.google.com/")
})
})
</script>
</head>
<body>
<button type="button" id="btnN">네이버</button>
<button type="button" id="btnD">다음</button>
<button type="button" id="btnG">구글</button>
</body>
</html>
여기서 주의 깊게 봐야하는 코드는 아래의 코드이다.
$(location).attr("href", "이동하고 싶은 링크")
여기서 선택된 location은 인터페이스로써 객체가 연결된 장소(URL) 를 표현한다. (다른 말로 현재의 url 정보를 가지고 있다.) Location 인터페이스에 변경을 가하면 연결된 객체에도 반영되게 된다. 여기서의 연결된 객체는 button 태그라고 볼 수 있으며, button 태그에 속성을 부여하는 메서드 attr을 이용해서 href를 속성과 이동할 링크를 넣어주는 것이다. 요약하면 현재의 location(url정보) 를 새로운 링크 속성(href="link") 으로 변경하는 것이다.
메인 이미지 출처: Photo by Gontran Isnard on Unsplash