런던
런던은 영국의 수도 도시입니다.
그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.
파리
파리는 프랑스의 수도입니다.
파리 영역 이상 1 천 2 백만 주민과 함께 유럽에서 가장 큰 인구 밀집 지역 중 하나입니다.
도쿄
도쿄는 일본의 수도입니다.
그것은 수도권의 중심, 세계에서 가장 인구가 많은 대도시 지역입니다.
탭 (도표 작성자)
탭은 한 페이지 웹 응용 프로그램에 대한, 또는 다른 과목을 표시 할 수있는 웹 페이지를 위해 완벽하다.
그냥 같은 클래스 이름을 가진 많은 요소를 만듭니다
예
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
다음 내용 열고 일부 클릭 버튼을 추가 (단일 버튼, 탐색 바, sidenav, 등 ..) :
예
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>그리고 요소를 선택하기 위해 자바 스크립트를 추가 :
예
openCity("London");
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 ()는 "런던"(ID = "런던)을 엽니 다 호출합니다.
사용자가 메뉴의 버튼 중 하나를 클릭 할 때 다음 다른 도시 이름 (ID = "파리)와 () 개방 도시를 호출합니다.
openCity () 함수는 클래스 이름 '시'와 함께 모든 요소 (디스플레이 = "없음")를 숨 깁니다 해, 지정된 도시 id를 가진 요소 (디스플레이 = "블록")를 표시합니다.
액티브 / 현재 탭
당신이 사용자에 현재 탭 / 페이지를 강조 표시하려면 JavaScript를 사용하고 현재 탭 링크에 특정 색상 클래스를 추가 할 수 있습니다. 아래의 예에서, 우리는 각 링크에 "tablink"클래스를 추가했습니다. 그런 식으로,이 탭과 연결된 모든 링크를 얻고, 그것을 강조하기 위해, 현재 탭 링크에게 "W3-빨간색"클래스를 제공하기 쉽습니다 :
예
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-sidenav w3-light-grey" style="width:130px">
<a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
<a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
<a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</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> »그에게 자신을보십시오 그리드에서 탭
세 번째 열 레이아웃 탭을 사용. 우리는 대신에 배경 색상의 활성 탭으로 바닥 테두리를 추가합니다 :