トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"T3T"掲示板(Twilight(トワイライト) Triath(トライアス)(3) Trim(トリム))

★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク・ページの表示 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [000002C6]  <Date>: 2022/03/02 00:16:32
<Title>: CSSデモ(+JavaScript)/2階層タブ
<Name>: amanojaku@管理人

下記は実際のページです。

http://xd305417.html.xdomain.jp/demo/Tab_Level-2_001.htm

改造する場合に注目する所は「TUnit」、「TUnit-xxx」、「TUnit-xxx-xxx」です。
idは一意の名前を表し、nameはグループ名を表します。
2階層タブは、第1階層目のタブの選択時に、第2階層目のタブをリセットするためにJavaScriptが必須になります。
ほんの数行のJavaScriptを使ってますが、基本的にはラジオボタンをONしている関数なので、そんなに難しいことは無いでしょう。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <title></title>
  <!--
!importantはもう使わない!CSSの優先順位をおさらいしよう
http://creator.aainc.co.jp/archives/4947
-->
  <style>
    .Tab_Container {
      display: flex;
      flex-wrap: wrap;
    }

    .Tab_LOpener {
      display: inline-block;
      font-weight: bold;
      color: #fef;
      background: #0bb;
      margin: 0.1em 0.3em 0.1em 0em;
      padding: 0.2em 1em;
      order: -1;
    }

    .Tab_Content {
      width: 100%;
      display: none;
    }

    .Tab_ISwitch:checked+.Tab_LOpener {
      /*優先順位:21点*/
      font-weight: bold;
      color: #777;
      background: #0f7;
    }

    .Tab_Container>.Tab_LOpener:hover {
      /*優先順位:21点*/
      font-weight: bold;
      color: #777;
      background: #0ee;
    }

    .Tab_ISwitch:checked+.Tab_LOpener+.Tab_Content {
      display: block;
    }

    .Tab_Container>input[type="radio"] {
      display: none;
    }

  </style>
</head>
<body>
  <div class="Tab_Container">
    <input id="TUnit-001" type="radio" name="TUnit" class="Tab_ISwitch" onclick="RadioSwitch('TUnit-001-001')" checked>
    <label class="Tab_LOpener" for="TUnit-001">TUnit-001</label>
    <div class="Tab_Content">
      <div class="Tab_Container">
        <input id="TUnit-001-001" type="radio" name="TUnit-001" class="Tab_ISwitch" checked>
        <label class="Tab_LOpener" for="TUnit-001-001">TUnit-001-001</label>
        <div class="Tab_Content">
          いろはにほへと 
          ちりぬるを 
          わかよたれそ 
          つねならむ 
          うゐのおくやま 
          けふこえて 
          あさきゆめみし 
          ゑいもせす<br>
        </div>

        <input id="TUnit-001-002" type="radio" name="TUnit-001" class="Tab_ISwitch">
        <label class="Tab_LOpener" for="TUnit-001-002">TUnit-001-002</label>
        <div class="Tab_Content">
          ちりぬるを 
          わかよたれそ 
          つねならむ 
          うゐのおくやま 
          けふこえて 
          あさきゆめみし 
          ゑいもせす<br>
        </div>
      </div>
    </div>

    <input id="TUnit-002" type="radio" name="TUnit" class="Tab_ISwitch" onclick="RadioSwitch('TUnit-002-001')">
    <label class="Tab_LOpener" for="TUnit-002">TUnit-002</label>
    <div class="Tab_Content">
      <div class="Tab_Container">
        <input id="TUnit-002-001" type="radio" name="TUnit-002" class="Tab_ISwitch" checked>
        <label class="Tab_LOpener" for="TUnit-002-001">TUnit-002-001</label>
        <div class="Tab_Content">
          わかよたれそ 
          つねならむ 
          うゐのおくやま 
          けふこえて 
          あさきゆめみし 
          ゑいもせす<br>
        </div>

        <input id="TUnit-002-002" type="radio" name="TUnit-002" class="Tab_ISwitch">
        <label class="Tab_LOpener" for="TUnit-002-002">TUnit-002-002</label>
        <div class="Tab_Content">
          つねならむ 
          うゐのおくやま 
          けふこえて 
          あさきゆめみし 
          ゑいもせす<br>
        </div>
      </div>
    </div>

  </div>
</body>
<script>
  function RadioSwitch(idHR) {
    if (idHR) {
      let wHR = document.getElementById(idHR);
      wHR.checked = true; // false; //
    }
    // event.stopPropagation();
    // return false; // true; //
  }
</script>
</html>

Block( Address 000002F2 Identity 000002C6 )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.