답변 2개
채택된 답변
+20 포인트
2년 전
</p>
<p><html>
<head>
<style>
/* Add some styles for the tabs */
.tabs {
display: flex;
justify-content: space-between;
height: 40px;
background-color: #ddd;
}</p>
<p> .tab {
width: 33.33%;
text-align: center;
line-height: 40px;
}</p>
<p> /* 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></p>
<p> <script>
// Add some JavaScript to handle the swipe gesture
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');</p>
<p> let activeTab = 1;
tabs.forEach(tab => {
tab.addEventListener('click', () => {
activeTab = parseInt(tab.getAttribute('data-tab'));</p>
<p> tabs.forEach(tab => {
tab.classList.remove('active');
});</p>
<p> tabContents.forEach(tabContent => {
tabContent.style.display = 'none';
});</p>
<p> tab.classList.add('active');
document.querySelector(`[data-content="${activeTab}"]`).style.display = 'block';
});</p>
<p> tabContents.forEach(tabContent => {
tabContent.style.display = 'none';
});</p>
<p> document.querySelector(`[data-content="${1}"]`).style.display = 'block';
});
</script>
</body>
</html></p>
<p>내용 전부 display를 none으로 하고 첫번째만 block 해봤어요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
s
sinbi
2년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다. 잘 작동하네요.
https://codepen.io/sinbi/pen/YzjMjrK