링크 URL 변경하기(jQuery)

링크 URL 변경하기

링크 URL을 다른 URL 주소로 변경하는 작업은 매우 간단한 작업으로 .attr 메소드의 사용으로 가능합니다(.attr 메소드에 대한 자세한 내용은 여기 참고).

$(document).ready(function() {
$('.example a').attr('href','http://www.example.com/contat');
});
// 참고: www.ronvangorp.com

응용

<a href="..."> 태그에서 링크를 직접 수정할 수 있는 경우에는 직접 수정하는 것이 가장 간단하겠지만, 간혹 수정할 수 없는 경우가 발생할 수 있습니다. 이 경우에 위의 jQuery 스크립트를 유용하게 사용할 수 있습니다. 예를 들어, 워드프레스 내에서 헤더 부분의 사이트 타이틀을 클릭하면 Site-url, 즉 홈페이지 주소로 이동하게 됩니다. 워드프레스 사이트 제목을 클릭할 때(혹은 로고를 클릭할 때) 외부 URL로 이동하게 만들고 싶은 경우에 활용할 수 있습니다.

$(document).ready(function() {
$('.site-title a').attr('href','https://www.thewordcracker.com/ko/');
});

DIV를 클릭할 때 특정 주소로 이동하도록 링크 설정하기

특정 DIV를 클릭하면 다른 페이지나 URL로 이동하도록 만들고 싶은 경우 window.location을 사용합니다.

$('.book').click(function(){
window.location = 'http://www.example.com/question';
});

그리고 cursor:pointer를 사용(CSS)하여 해당 DIV 위에 마우스를 올렸을 때 커서 모양을 바꾸어 div가 <a href="...">를 사용했을 때와 동일하게 작동하도록 만들 수도 있습니다.

참고:

• jQuery를 사용하여 텍스트 변경하기