簡単なスタイルで、タブ表示をしてみました。
TABLE要素を使用していて、比較的調整が簡単だと思います。
組み込み方：
Test.htm： <!DOCTYPE HTML> <HTML> <HEAD> <META http-equiv="content-language" content="ja"> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <TITLE>タブ式表示</TITLE> <STYLE>@import url("c/Style.css");</STYLE> <SCRIPT src="c/Main.js"></SCRIPT> </HEAD> <BODY> <TABLE class=Tab> <THEAD><TR> <TD id=IdTab1 onclick="DispTab(1)" class=OnTab>タブ1 <TD id=IdTab2 onclick="DispTab(2)" class=OffTab>タブ2 <TD id=IdTab3 onclick="DispTab(3)" class=OffTab>タブ3</THEAD> <TR><TD colspan=3 id=IdNai1 class=OnNai>内容1 <TR><TD colspan=3 id=IdNai2 class=OffNai>内容2 <TR><TD colspan=3 id=IdNai3 class=OffNai>内容3 </TABLE> </BODY> </HTML>
Style.css： /* TabA.htm用CSS */ /* 作成：2006.09.16 by T.A. */ /* 編集：2026.02.26 by T.A. */ TABLE.Tab{ border-collapse:separate; border-spacing:0; } .OnTab{ /* TD：オンTab */ border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; background-color:#fff; border-bottom:0px; cursor:default; } .OffTab{ /* TD：オフTab */ border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; background-color:#888; border-bottom:1px solid #000; cursor:default; } .OnNai{ /* TD：内容：オンの場合 */ display:table-cell; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; background-color:#fff; } .OffNai{ /* TD：内容：オフの場合 */ display:none; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; background-color:#fff; }
Main.js： //TabA.htm用JavaScript //作成：2006.09.16 by T.A. //編集：2026.02.26 function DispTab(TabNum){ //＝1～3 IdTab1.className="OffTab"; IdTab2.className="OffTab"; IdTab3.className="OffTab"; IdNai1.className="OffNai"; IdNai2.className="OffNai"; IdNai3.className="OffNai"; switch(TabNum){ case 1: IdTab1.className="OnTab"; IdNai1.className="OnNai"; break; case 2: IdTab2.className="OnTab"; IdNai2.className="OnNai"; break; case 3: IdTab3.className="OnTab"; IdNai3.className="OnNai"; break; } } //デバッグ用データ表示 //作成：2026.02.26 by T.A. //編集：2026.02.26 function Debug(D){ IdDebug1.innerHTML=D; }