ロンドン
ロンドンはイギリスの首都です。
これは、1300万人の住民の首都圏で、イギリスで最も人口の多い都市です。
パリ
パリはフランスの首都です。
パリの面積は1200万人以上の人口を抱えるヨーロッパ最大の人口密集地の一つです。
東京
東京は日本の首都です。
これは、首都圏の中心、世界で最も人口の多い首都圏です。
タブ（タビュレータ）
タブは、単一ページの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>
そして、コンテンツ開くためにいくつかのクリック可能なボタンを追加（単一ボタン、ナビゲーションバー、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>そして、要素を選択するために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";
}
»それを自分で試してみてください JavaScriptはの説明しました
まず、「ロンドン」（ID = "ロンドン）を開くopenCity（）を呼び出します。
ユーザーがメニューのボタンのいずれかをクリックしたときに続いて別の都市名（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> »それを自分で試してみてください グリッド内のタブ
第3列レイアウトのタブを使用します。 私たちが代わりに背景色を、アクティブなタブに下の枠線を追加することに注意してください：