티스토리 뷰
728x90
반응형
안녕하세요 찐망고 입니다.
js를 이용하여 탭을 만들어 관리해 보겠습니다.
예전에 많이 썼던 탭형태 js
<div class="tabs">
<button class="tablink" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tablink" onclick="openTab(event, 'tab2')">Tab 2</button>
<button class="tablink" onclick="openTab(event, 'tab3')">Tab 3</button>
<div id="tab1" class="tabcontent">
<h2>Tab 1 Content</h2>
<p>This is the content of Tab 1.</p>
</div>
<div id="tab2" class="tabcontent">
<h2>Tab 2 Content</h2>
<p>This is the content of Tab 2.</p>
</div>
<div id="tab3" class="tabcontent">
<h2>Tab 3 Content</h2>
<p>This is the content of Tab 3.</p>
</div>
</div>
.tabcontent {
display: none;
}
.tablink {
background-color: #f2f2f2;
border: none;
color: black;
padding: 10px 20px;
cursor: pointer;
}
.tablink:hover {
background-color: #ddd;
}
.tabs {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Default tab
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablink")[0].className += " active";
es6버전도 있지요
<div class="tabs">
<button class="tablink" data-tab="tab1">Tab 1</button>
<button class="tablink" data-tab="tab2">Tab 2</button>
<button class="tablink" data-tab="tab3">Tab 3</button>
</div>
<div id="tab1" class="tabcontent">
<h2>Tab 1 Content</h2>
<p>This is the content of Tab 1.</p>
</div>
<div id="tab2" class="tabcontent">
<h2>Tab 2 Content</h2>
<p>This is the content of Tab 2.</p>
</div>
<div id="tab3" class="tabcontent">
<h2>Tab 3 Content</h2>
<p>This is the content of Tab 3.</p>
</div>
const tabLinks = document.querySelectorAll('.tablink');
const tabContents = document.querySelectorAll('.tabcontent');
tabLinks.forEach(tabLink => {
tabLink.addEventListener('click', () => {
const tabId = tabLink.getAttribute('data-tab');
tabContents.forEach(tabContent => {
if (tabContent.id === tabId) {
tabContent.style.display = 'block';
} else {
tabContent.style.display = 'none';
}
});
tabLinks.forEach(link => {
link.classList.remove('active');
});
tabLink.classList.add('active');
});
});
// Default tab
document.getElementById("tab1").style.display = "block";
tabLinks[0].classList.add('active');
index를 사용하여 탭을 관리할 수도 있습니다.
<div class="tabs">
<button class="tablink">Tab 1</button>
<button class="tablink">Tab 2</button>
<button class="tablink">Tab 3</button>
</div>
<div id="tab1" class="tabcontent">
<h2>Tab 1 Content</h2>
<p>This is the content of Tab 1.</p>
</div>
<div id="tab2" class="tabcontent">
<h2>Tab 2 Content</h2>
<p>This is the content of Tab 2.</p>
</div>
<div id="tab3" class="tabcontent">
<h2>Tab 3 Content</h2>
<p>This is the content of Tab 3.</p>
</div>
const tabLinks = document.querySelectorAll('.tablink');
const tabContents = document.querySelectorAll('.tabcontent');
tabLinks.forEach((tabLink, index) => {
tabLink.addEventListener('click', () => {
tabContents.forEach((tabContent, i) => {
if (i === index) {
tabContent.style.display = 'block';
} else {
tabContent.style.display = 'none';
}
});
tabLinks.forEach(link => {
link.classList.remove('active');
});
tabLink.classList.add('active');
});
});
// Default tab
tabContents[0].style.display = 'block';
tabLinks[0].classList.add('active');
728x90
반응형
'WEB > JS코드' 카테고리의 다른 글
자바스크립트 부드러운 top버튼 스크롤 이벤트 (2) | 2024.03.25 |
---|---|
자바스크립트 top 버튼 애니메이션 - requestAnimationFrame() (0) | 2024.03.21 |
css와 js를 이용한 자동 롤링 슬라이드 배너 (2) | 2024.03.05 |
jQuery.marquee 텍스트 자동 롤링 (0) | 2024.03.04 |
iOS 에서 동영상 재생이 안되나요? (0) | 2023.07.10 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 자바스크립트숫자카운트
- margin
- 포토샵합성
- Border
- padding
- 시멘틱마크업
- 피그마플러그인
- 슬라이드플러그인
- 크로스브라우징
- 웹접근성
- css
- 웹표준
- css그리드
- 웹디자인
- CSS3
- 디자인팁
- boxmodel
- css4
- 프로그래밍기초
- 반응형웹
- UI디자인
- Slick
- JavaScript
- uidesign
- JavaScriptTips
- slickAPI
- 스마트폰해상도
- uiux
- 코딩교육
- uxdesign
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
글 보관함