a 앵커 엘리먼트 자체는 disable 옵션을 제공하지 않는듯 하지만,
href 속성 조정을 통해 하이퍼링크를 비활성화 시킬 수 있다.
a 태그의 하이퍼링크 비활성화 시키는 법
href = "#" 설정
- <HTML>
<a href="#">링크는 걸리지만, 이동을 안 함</a>
- <HTML>
href 속성 자체를 제거
- <HTML>
<a>링크 자체가 안 걸림</a>
- <HTML>
동적 비활성화: 자바스크립트로 a 태그를 취득해서, href속성을 제거하면 된다.
<HTML>
<a href="https://curryyou.tistory.com" class="disableLink">링크 토글</a><Javascript>
document.querySelector(".disableLink").removeAttribute('href');
추가 팁
비활성화 상태를 표시하기 위해 글자색을 변경하려면,
a태그에 클래스를 설정해두고, CSS를 통해 조정해두면 된다.
(물론 자바스크립트로 태그.style.color 값을 조정해도 된다.)
- <HTML>
<a class="disable">링크 비활성화</a>- <CSS>
.disable {
color: gray;
}
전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 비활성화 태그 글자색 조정 */
.disable{
color: gray;
}
</style>
<script>
window.onload = function(){
const btn = document.querySelector('#btn_link');
btn.onclick = function(e){
// 버튼을 클릭하면, a태그의 href 속성을 제거
document.querySelector(".disableLink").removeAttribute('href');
}
}
</script>
</head>
<body>
<a href="#">링크는 걸리지만, 이동을 안 함</a>
<br><br>
<a >링크 자체가 안 걸림</a>
<br><br>
<a class="disable">링크 비활성화</a>
<br><br>
<button id="btn_link">href 토글</button>
<a href="https://curryyou.tistory.com" class="disableLink">링크 토글</a>
</body>
</html>해결 완료!
'개발(Development) > HTML, CSS' 카테고리의 다른 글
| [HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) (0) | 2021.01.22 |
|---|---|
| [CSS] 아이폰(iOS) input, button 기본 테두리, 색(그라데이션) 스타일 제거 방법 (0) | 2021.01.21 |
| [HTML] 스마트폰(모바일) input 입력창 포커스 시, 화면 확대 방지 방법 (0) | 2021.01.20 |
| [HTML] input:radio 여러개(다중) 선택될 때, 하나만(단일) 선택 방법 (0) | 2021.01.19 |
| [CSS] HTML: 이미지 태그 img 여백 뜨는 문제 해결방법 (0) | 2021.01.03 |
댓글