반응형
래디오 선택에 따라 숨겨진 레이어가 출력된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A타입과 B타입 선택</title>
<style>
/* 라디오 버튼 스타일링 */
label {
display: inline-block;
margin-right: 10px;
}
/* 레이어 스타일링 */
.layer {
display: none;
}
/* 선택한 레이어만 보이도록 */
input[type="radio"]:checked + .layer { display: block; }
</style>
</head>
<body>
<h1>A타입과 B타입 선택</h1>
<form>
<label for="a-type">A타입</label>
<input type="radio" id="a-type" name="type" value="A" checked>
<label for="b-type">B타입</label>
<input type="radio" id="b-type" name="type" value="B">
</form>
<!-- A타입 레이어 -->
<div class="layer" id="a-layer">
<h2>A타입 레이어</h2>
<!-- A타입 레이어의 내용을 여기에 추가 -->
aaaaasdfafsafsaf
</div>
<!-- B타입 레이어 -->
<div class="layer" id="b-layer">
<h2>B타입 레이어</h2>
<!-- B타입 레이어의 내용을 여기에 추가 -->
bbbbzvzvxvzvzva
</div>
<script>
// 페이지 로딩 시에도 선택한 레이어를 표시
const aTypeRadio = document.getElementById('a-type');
const bTypeRadio = document.getElementById('b-type');
const aLayer = document.getElementById('a-layer');
const bLayer = document.getElementById('b-layer');
aTypeRadio.addEventListener('change', () => {
aLayer.style.display = 'block';
bLayer.style.display = 'none';
});
bTypeRadio.addEventListener('change', () => {
aLayer.style.display = 'none';
bLayer.style.display = 'block';
});
</script>
</body>
</html>반응형
'html&php' 카테고리의 다른 글
| 은행 계좌번호 복사에 사용하는 터치하면 복사하기 (0) | 2024.01.22 |
|---|---|
| 래디오 버튼을 이용한 선택에 따른 내용 출력하기 - 기본값 (0) | 2023.10.05 |
| css와 li 그리고 스크립트를 이용한 세로 메뉴 (0) | 2023.04.26 |
| 탭 메뉴 · 마우스를 메뉴에 올리면 자동으로 내용 나오게 하기 (0) | 2023.04.05 |
| 스크롤을 내려도 위에 떠있는 메뉴 (0) | 2023.03.23 |