chatGPT가 탭소스를 하나 짜줬는데....
관련링크
본문
처음 접속 시, 탭1,2,3의 내용이 모두 보이네요.
처음 접속 시, 탭1의 내용만 보이고 탭1이 활성화된 상태로 보이게 하려면 ?
답변 2
<html>
<head>
<style>
/* Add some styles for the tabs */
.tabs {
display: flex;
justify-content: space-between;
height: 40px;
background-color: #ddd;
}
.tab {
width: 33.33%;
text-align: center;
line-height: 40px;
}
/* Add some styles for the tab content */
.tab-content {
height: 300px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab" data-tab="1">Tab 1</div>
<div class="tab" data-tab="2">Tab 2</div>
<div class="tab" data-tab="3">Tab 3</div>
</div>
<div class="tab-content" data-content="1">
Content of Tab 1
</div>
<div class="tab-content" data-content="2">
Content of Tab 2
</div>
<div class="tab-content" data-content="3">
Content of Tab 3
</div>
<script>
// Add some JavaScript to handle the swipe gesture
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
let activeTab = 1;
tabs.forEach(tab => {
tab.addEventListener('click', () => {
activeTab = parseInt(tab.getAttribute('data-tab'));
tabs.forEach(tab => {
tab.classList.remove('active');
});
tabContents.forEach(tabContent => {
tabContent.style.display = 'none';
});
tab.classList.add('active');
document.querySelector(`[data-content="${activeTab}"]`).style.display = 'block';
});
tabContents.forEach(tabContent => {
tabContent.style.display = 'none';
});
document.querySelector(`[data-content="${1}"]`).style.display = 'block';
});
</script>
</body>
</html>
내용 전부 display를 none으로 하고 첫번째만 block 해봤어요
역시 인공지능보단 사람이네요. ㅎ
감사합니다. 잘 작동하네요.
https://codepen.io/sinbi/pen/YzjMjrK
뒷북입니다만 이건 리스너이벤트 보다는 클래식이벤트로 만들고 가장 마지막에
tap1.onclick() 을 주는게 기장 간명할 것 같습니다.
좋은 의견 감사합니다. AI가 짠 코드가 신기해서 질문해 봤어요. ㅎ
답변을 작성하시기 전에 로그인 해주세요.