새소식
반응형
WEB/jQuery
[jQuery] 제이쿼리를 이용한 href(링크) 부여 attr/location
- -
반응형
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
반응형
'WEB > jQuery' 카테고리의 다른 글
| [jQuery] ajax로 window.location.href = "CSV 파일 다운로드" 구현 (0) | 2023.06.06 |
|---|---|
| [jQuery] 제이쿼리를 slideToggle을 사용법 알아보기. (0) | 2021.05.01 |
| [jQuery] 제이쿼리 hide / show 메소드 알아보기 (0) | 2021.04.14 |
| [jQuery] 제이쿼리 append 와 after 차이 알아보기 (0) | 2021.03.31 |
| [jQuery] 제이쿼리 button click trigger / enter key event (0) | 2021.03.24 |
Contents
소중한 공감 감사합니다