여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. How To - 탭
How To – 탭
1개월전 작성
1개월전 수정

w3.css

CSS 및 JavaScript를 사용하여 탭을 만드는 방법을 알아보자.

탭은 단일 페이지 웹 애플리케이션이나 다양한 주제를 표시할 수 있는 웹 페이지에 적합하다.

1단계) HTML 추가
<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

특정 탭 콘텐츠를 여는 버튼을 만든다.
모든 <div> 요소는 class=”tabcontent”기본적으로 숨겨져 있다(CSS 및 JS 포함).
사용자가 버튼을 클릭하면 이 버튼과 “일치하는” 탭 콘텐츠가 열린다.

2단계) CSS 추가

버튼과 탭 내용의 스타일을 지정한다.

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
기본 예시
예제 보기
3단계) ​​자바스크립트 추가
function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
기본 예시
예제 보기

페이드 인 탭

탭 내용을 페이드 인하려면 다음 CSS를 추가하자.

예제
.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
기본 예시
예제 보기

기본적으로 탭 표시

페이지 로드 시 특정 탭을 열려면 JavaScript를 사용하여 지정된 탭 버튼을 “클릭”하자.

예제
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>

<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
기본 예시
예제 보기

탭 닫기

특정 탭을 닫으려면 JavaScript를 사용하여 버튼 클릭 한 번으로 탭을 숨길 수 있다.

예제
<!-- Click on the <span> element to close the tab -->

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그