Programming/JavaScript
a tag disable :: a 태그 동적 비활성화 :: a 태그 링크 제거
고고마코드
2022. 9. 3. 20:37
반응형
a tag를 사용할 때 동적으로 disable
처리를 해주어야 할 때가 있습니다.
a tag에는 따로 disable
속성이 없습니다.
그래서 동적으로 href
를 변경하거나 지워야 합니다.
해결한 과정을 기록합니다.
방법
- a tag 에 data-href 로 링크를 미리 담아둡니다.
또는 동적으로 여러개를 써야 한다면,data-href1
,data-href2
이런 식으로 미리 담아두는 방법도 있습니다. - 이벤트가 있을 경우 href 속성 값의 유무에 따라 동적으로 값을 추가하고 뺍니다.
테스트 코드 준비
버튼을 클릭하면 a 태그의 링크를 지우고,
다시 클릭하면 a 태그의 링크를 살리는 테스트를 진행하겠습니다.
- 결과물
코드
HTML 소스
<button class="btn" value="toggle">toggle button</button>
<a class="aTag" href="https:www.google.co.kr" data-href="https:www.google.co.kr">구글로 이동</a>
<p id="pTagId"></p>이동</a>
JQuery 방식
$(document).ready(() => {
$("#pTagId").html($(".aTag").attr("href"));
})
$(".btn").on("click", () => {
let aTagHref;
if ($(".aTag").attr("href") === undefined) {
let aTag = $(".aTag").attr("href", $(".aTag").data("href"));
aTagHref = aTag.attr("href");
} else {
$(".aTag").removeAttr("href");
aTagHref = '';
}
$("#pTagId").html(aTagHref);
});
javascript 방식
window.onload = () => {
const pTag = document.getElementById('pTagId');
pTag.innerHTML = document.querySelector('.aTag').href;
}
const toggleBtn = document.querySelector('.btn');
toggleBtn.addEventListener('click', () => {
const aTag = document.querySelector('.aTag');
if (aTag.href === undefined || aTag.href === '') {
aTag.setAttribute('href', aTag.dataset.href);
} else {
aTag.removeAttribute('href');
}
const pTag = document.getElementById('pTagId');
pTag.innerHTML = aTag.href;
});
반응형