London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris is the capital of France.
Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
タブは、単一ページ web アプリケーション、またはいろいろな題材を表示する可能性がある Web ページに最適です。
単に、同じクラス名を持つ多くの要素を作成します：
<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>
次に、コンテンツ開くためのクリック可能なボタン（単一のボタン、ナビゲーションバー、サイドナビ、など..）を追加します：
<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>
そして、要素を選択するために JavaScript を追加します：
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";
}
Try It Yourself ❯
先ず、"London" (id="London) をオープンするため、openCity() をコールします。
その後、ユーザがメニュー内のボタンの 1 つをクリックしたときに、別な city 名 (id="Paris) で openCity() をコールします。
openCity() 関数は、クラス名が "city" の全要素を非表示（display="none"）にしてから、 指定された city id を持つ要素を表示（display="block"）します。
ユーザが現在いるタブ/ページを強調表示する場合は、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";
}
Try It Yourself ❯
<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>
Try It Yourself ❯
タブのコンテンツにフェードインやズームイン、スライドインを設定するには、w3-animate-classes のいずれかを使用します：
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Try It Yourself ❯
×
×
×
×
<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>
Try It Yourself ❯
3 カラムレイアウトのタブを使用します。背景色の代わりに、アクティブなタブの下にボーダーを追加していることに注意してください：