innerHTMLでタブ切り替え

各タブをクリックすれば内容を表示します。

innerHTML outerHTML insertAdjacentHTML insertAdjacentText
 

Sample Source......................................................................>>>

<style type="text/css">
<!--
table {font:12px 'MS 明朝';}
#td1,#td2,#td3,#td4 {border-top:1px solid black;border-left:1px solid black;
                                  background-color:silver;cursor:pointer; text-align:center;}
#contens {border-left:1px solid black;border-bottom:1px solid black;border-right:1px solid black;}
-->
</style>

<script language="JavaScript"><!--
  var oldel = null;    //直前にクリックされたセルを記憶しておく
  function tab(c,n,e){
    if(null != oldel){    //直前に表示されたセルを元に戻しておく
        oldel.style.backgroundColor = "";
        oldel.style.borderBottom = "1px solid black";
        oldel.style.color = "";
    }

    var el = document.getElementById(e);      //クリックしたタブ゙を識別する
    var con = document.getElementById("contens");
    el.style.backgroundColor = c; //タブの色を設定
    el.style.color = "red";
    el.style.borderBottom = "1px dotted white";
    con.style.backgroundColor = c;          //データ表示領域もタブと同じ色に
    oldel = el;           //現在のタブ゙を記憶しておく
    con.innerHTML = document.getElementById("dv" +n).innerHTML;
 }
// -->
</script>
</head>

<body>
<table><tr>
     <td id="td1" onclick="tab('linen',1,'td1')">innerHTML</td>
     <td id="td2" onclick="tab('lavender',2,'td2')">outerHTML</td>
     <td id="td3" onclick="tab('mistyrose',3,'td3')">insertAdjacentHTML</td>
     <td id="td4" onclick="tab('lightcyan',4,'td4')">insertAdjacentText</td>
</tr>
<tr>
      <td id="contens" colspan="4">&nbsp;</td>   //このセルに内容を表示
</tr>
</table>

<div id="dv1" style="display:none">
   開始・終了タグに挟まれた部分のHTMLを設定したり、読み出す。
<p><b>構文</b><br>
object.innerHTML[ = innerHTML]</p>
<p><br>
<b>設定</b></p>
<p>この読み書き可能なプロパティは、テキストとHTMLタグの組み合わせになる。ただし、&lt;html&gt;、&lt;head&gt;、&lt;title&gt;タグは除く。

・・・(以下、省略)
</div>  


(最終更新:12/12/28)
フレーム構成になっています・・・<[ホーム] >> [HTML整理ノート]>