W3.CSSナビゲーションタブ
ロンドン
ロンドンはイギリスの首都です。
イギリスで最も人口の多い都市であり、人口は900万人を超えます。
タブ付きナビゲーション
タブ付きナビゲーションは、Webサイト内を移動する方法です。
通常、タブ付きナビゲーションは、選択したタブが強調表示された状態で配置されたナビゲーションボタン（タブ）を使用します。
この例では、同じクラス名（この例では「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";
}
JavaScriptの説明
openCity （）関数は、ユーザーがメニューのボタンの1つをクリックしたときに呼び出されます。
この関数は、クラス名が「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>
グリッド内のタブ
3列目のレイアウトでタブを使用する。背景色の代わりに、アクティブなタブに下の境界線を追加することに注意してください。