最新のWeb開発のチュートリアル
 

W3.CSSタブ


ロンドン

ロンドンはイギリスの首都です。

これは、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">&times;</span>
  <div class="w3-display-bottomleft w3-container">Nature</div>
</div>
»それを自分で試してみてください

グリッド内のタブ

第3列レイアウトのタブを使用します。 私たちが代わりに背景色を、アクティブなタブに下の枠線を追加することに注意してください: