[jQuery] jQuery를 이용하여 특정 태그의 attribute 바꾸기

jQuery 를 이용하여, 특정 태그의 attribute 를 바꾸는 방법을 알아봅시다. 예를 들어서 a 태그의 href 가 원래 http://google.com 인데, 사용자가 특정 액션을 할 경우 http://naver.com 으로 바꿔주는 것입니다.

a 태그 만들기

<a href="http://google.com" target=_blank id="a-google">구글</a>

id 가 “a-google” 이라고 정의된 앵커 태그를 만들어 줍니다. 기본 세팅으로 href 는 “http://google.com” 입니다.

attribute 바꾸는 함수 만들기

function change_href() {
  $("#a-google").attr("href", "http://naver.com")
}

이제 change_href 라는 함수를 만들어줍니다. 함수가 하는 역할은 간단합니다. href 의 내용을 구글 주소에서 네이버 주소로 바꿔주는 것입니다.

사용자가 a 태그 클릭 할 때 함수 실행시키기

<a href="http://google.com" target=_blank id="a-google" onClick="change_href()">구글</a>

이제 앞서 만든 앵커 태그에서 클릭 할 때(onClick) 함수(change_href)를 실행시키도록 수정해 줍니다.

이제 해당 앵커 태그를 누르면 네이버로 이동하게 됩니다.

끝.