button 클릭 시 링크로 이동하도록 구현하기를 알아보기에 앞서 좋지 않은 예를 먼저 보도록 하자.
좋지 않은 예(오류가 발생할 수 있는 경우)
<!--a태그 내부에 버튼-->
<a href="#"><button>TEST</button></a>
<!--버튼 내부에 a태크-->
<button><a href="/">TEST</a></button>
위의 두가지 경우는 버튼과 링크 이동이 제대로 연동된 것 처럼 보이기는 하지만 종종 오류가 발생하는 경우이다. button과 a는 둘다 상호작용을 위한 "이벤트가 발생하는" 태그이기 때문에 일부 페이지에서는 두 개의 이벤트가 충돌하면서 한가지가 무시되거나 먹통이 되는 현상이 발생 할 수 있다.
이런 오류를 방지하려면 button과 a 태그는 분리하여 사용해야한다.
다음과 같이 작성하면 button으로 링크이동 구현이 가능하다.
<!--현재창에서 링크이동-->
<button onclick="location.href='링크주소';">버튼내용</button>
<!--새 창으로 링크이동-->
<button onclick="window.open('링크주소');">버튼내용</button>jQuery를 이용한 구현도 가능하다.
$(location).attr("href", "이동하고 싶은 링크");