2021-04-17
<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