W3.CSS 탐색 탭
런던
런던은 영국의 수도이다.
영국에서 가장 인구가 많은 도시로 인구 900만 명이 넘는 대도시권이 있습니다.
탭 탐색
탭 탐색은 웹사이트를 탐색하는 방법입니다.
일반적으로 탭 탐색은 선택한 탭이 강조 표시된 상태로 정렬된 탐색 버튼(탭)을 사용합니다.
이 예제에서는 클래스 이름이 같은 요소(이 예제에서는 "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="#" 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>
그리드의 탭
세 번째 열 레이아웃에서 탭 사용. 배경색 대신 활성 탭에 아래쪽 테두리를 추가합니다.