w3.css

탐색 탭

탭 탐색은 웹 사이트를 탐색하는 방법이다.

일반적으로 탭 탐색은 선택한 탭이 강조 표시된 상태로 함께 배열된 탐색 버튼(탭)을 사용한다.

이 예에서는 동일한 클래스 이름(예제에서는 “city”)을 가진 요소를 사용하고 display:none 과 display:block 사이의 스타일을 변경하여 다른 콘텐츠를 숨기고 표시한다.

예제

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

탭 콘텐츠를 열 수 있는 클릭 가능한 버튼도 있다.

예제

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>

그리고 이 작업을 수행하는 JavaScript는 다음과 같다.

예제

function openCity(cityName) {
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";
}

자바스크립트 설명

openCity () 함수는 사용자가 메뉴의 버튼 중 하나를 클릭할 때 호출된다.

이 함수는 클래스 이름이 "city"(display="none")인 모든 요소를 ​​숨기고, 지정된 도시 이름(display="block") 을 가진 요소를 표시한다.

닫을 수 있는 탭

탭을 닫으려면 탭 컨테이너 내부의 요소에 onclick="this.parentElement.style.display='none'"을 추가한다.

예제

<div id="London" class="w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

활성/현재 탭

사용자가 있는 현재 탭/페이지를 강조 표시하려면 JavaScript를 사용하고 활성 링크에 색상 클래스를 추가한다.

아래 예에서는 각 링크에 "tablink" 클래스를 추가했다.
이렇게 하면 탭과 연결된 모든 링크를 가져오고 현재 탭 링크에 "w3-red" 클래스를 지정하여 강조 표시하는 것이 쉽다.

예제

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}

수직 탭

예제

<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>

애니메이션 탭 콘텐츠

w3-animate- 클래스 중 하나를 사용하여 탭 콘텐츠를 페이드, 확대/축소 또는 슬라이드할 수 있다.

예제

<div id="London" class="w3-container city w3-animate-left">
  <p>London is the capital city of England.</p>
</div>

탭 이미지 갤러리

예제

<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
  <img src="img_nature.jpg" alt="Nature">
</a>

<div id="Nature" class="picture w3-display-container">
  <img src="img_nature_wide.jpg" alt="Nature" style="width:100%">
  <span onclick="this.parentElement.style.display='none'" class="w3-display-topright">×</span>
  <div class="w3-display-bottomleft w3-container">Nature</div>
</div>

그리드의 탭

세 번째 열 레이아웃에서 탭을 사용한다.
배경색 대신 활성 탭에 아래쪽 테두리를 추가한다.

예제

  <div class="w3-row">
    <a href="javascript:void(0)" onclick="openCity(event, 'London');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">London</div>
    </a>
    <a href="javascript:void(0)" onclick="openCity(event, 'Paris');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Paris</div>
    </a>
    <a href="javascript:void(0)" onclick="openCity(event, 'Tokyo');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Tokyo</div>
    </a>
  </div>

  <div id="London" class="w3-container city" style="display:none">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="w3-container city" style="display:none">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p> 
  </div>

  <div id="Tokyo" class="w3-container city" style="display:none">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기