その他■開閉幕１２　超簡単タブ切替もどき

■2015/09/17：「更新履歴」のターゲット指定を target="_top" から target="_new" に修正しました。
これにより、クリック後にリンク先に飛んだ後も「初期ページ」ではなく「更新履歴」ページに戻ります。
ブラウザFirefoxのみ、 target="_top" でも target="_new" でも、「更新履歴」ページに戻ります。

タブをクリックすると違うページに切り替わる、タブ切替のJavaScriptです。
胸を張って、言えます。世界中探しても、これほど簡単なタブ切替のJavaScriptは存在しません！
なぜかって？
実はタブ切替ではないからです。インラインフレームでもありません。タブ切替（ブランド品）に見せかけたコピー商品だからです（笑）
JavaScriptのソースは、たった一行のみです。
↓↓
function a(b){ document.getElementById("copy").innerHTML=b.innerHTML;}

仕組みを説明します。
まず、呼び出される複数のページの内容を、それぞれ「id="●"」指定をして、全部この同じページの中に記述します。
ただしその記述が見えないように、呼び出されるページ全部をまとめて、
<div style="display:none;">～～「id="●"を指定した呼び出されるページの複数のdiv」～～</div>
という形で囲んで隠します。
display:none も visibility:hidden も要素を非表示にする CSSの指定ですが、display:none はその領域も消してしまうのでレイアウトに影響を与えません。
そしてその隠しページの上の方に、クリックするタブ領域と、ページを呼び出す領域を作り、位置指定をしやすいように、その２つをid="waku"で囲みます。
その後、クリックで各ページの id="●"を呼び出すために、タブ部分に<a href="javascript:a(●);">■■</a>と記述して下さい。
この見本では、呼び出されるid="●"はpg1、pg2、pg3、pg4、pg5を利用していますが、id="●"とjavascript:a(●);の●の文字さえ一致していれば、自由に変更可能、増減可能です。

実は上記の「クリックで各ページの id="●"を呼び出す」という説明は、正確ではありません。
呼び出しているのではないのです。実はid="copy"の中身を、別のid="●"の中身に変更しているだけなのです。
つまりクリックするたびに、該当ページの内容をid="copy"の中にコピーしているわけです。
見えないように指定している「style="display:none;"」の記述を削除して、呼び出しのクリックをしてみて下さい。
呼び出されたid="●"の記述が、呼び出されても下の方にそのまま記述されていることがわかります。

「id="copy"の中身」が変更されているだけで、id="●"を表示しているのではないという意味は、大事です。
そのせいで表示された内容は、id="copy"で指定されたCSSの装飾が有効になります。
たとえ各ページに指定されている id="●"を利用して、CSSで背景色、文字色を別個に指定しても、それは全部無効になります。

それから同じ理由で、呼び出すid="●"の中でJavaScriptを使用することは難しいです。
JavaScriptは同じ変数を使用できないので、id="copy"と、見えないけれどid="●"の２ヶ所で、同じJavaScriptは動作しないのです。

たとえば呼び出すページごとに背景色や文字色を変更する必要が無ければ、とても簡単にタブ切替っぽく見せられる、「タブ切替もどき」です。
このJavaScriptは、前回掲載分の「その他■開閉幕１２クリックで簡単div変更」を削除して、タブ仕様に変更しました。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他■開閉幕１２　超簡単タブ切替もどき</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
/*★タブ切替用全体領域の指定。位置指定用。指定はお好みで。縦幅は指定しない*/
#waku{
width:600px;/*★必須。横幅指定。#copyと同じ横幅*/
margin:100px auto 30px;/*★bodyとの余白で位置指定。上　左右　下。数値はお好みで*/
}

/*★タブ領域の指定*/
#tab{white-space:nowrap;}/*★必須。タブの横並び指定*/

/*★タブ１個の指定*/
#tab a{
display:inline-block;/*★必須。横並びするためにインライン特性、サイズ指定するためにブロック特性*/ 
height:30px;/*★タブの縦幅指定*/
width:100px;/*★タブの横幅指定*/
line-height:30px;/*★行間指定。縦幅と同じにすると、文字の上下中央位置指定になる*/
text-align:center;/*★文字の左右中央位置指定*/
text-decoration:none;/*★リンク下線を消す*/
color:#000;/*★タブの文字色　黒色*/
background:#eee;/*★タブの背景色　薄い灰色*/
border:1px solid #000;/*★タブの枠線。黒色*/
margin-bottom:1px;/*★タブと、その下のページ表示領域との間に1pxの余白*/
}

#tab a:hover{ background:#000; color:#fff; }/*★タブのマウスオン時の装飾。黒い背景に白の文字。お好みで*/

/*★内容表示領域。横幅と縦幅指定とoverflow:auto;は必須。後はお好みで。呼び出す全てのページの共通指定になります*/
#copy{
width:600px;/*★必須。横幅指定。#wakuと同じ横幅*/
height:300px;/*★必須。縦幅指定。*/
overflow:auto;/*★必須。内容が領域を超えたらスクロールバー表示*/
box-sizing: border-box;/*★必須。パディングとボーダーを幅と高さに含める。#wakuからはみ出さないようにするため*/
padding:20px;/*★ページと内容物との余白*/
border:solid 1px #000;/*★ページの枠線　黒色*/
background:#fff;/*★ページの背景色　白色*/
color:#000;/*★ページの文字色　黒*/
}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<div id="waku"><!--★タブ切替用全体領域の開始。位置指定のため-->

<!--★↓が呼び出すクリックの位置。そのままコピー。内容の文章は変更可能。増減可能。
ページ領域にid="pg6"と付けたdivを増やしたら、<a href="javascript:a(pg6);">■■</a>を追加して呼び出す-->

<div id="tab"><!--★タブ領域の開始-->
<a href="javascript:a(pg1);">TAB1</a>
<a href="javascript:a(pg2);">TAB2</a>
<a href="javascript:a(pg3);">TAB3</a>
<a href="javascript:a(pg4);">TAB4</a>
<a href="javascript:a(pg5);">更新履歴</a>
</div><!--★ id="tab" の終了-->

<div id="copy">●上のメニューをクリックすると、ここに内容を表示します●</div><!--★呼び出し領域　id="copy"必須-->

</div><!--★ id="waku" タブ切替用全体領域の終了-->



<div style="display:none;"><!--★見えないページ領域の開始。非表示指定が入れてあります。この行はこのままコピー-------------------->

<div id="pg1">１ページ目の内容です。</div><!--★各ページごとにid="pg●"は必須-->
<div id="pg2">２ページ目の内容です。</div>
<div id="pg3">３ページ目の内容です。</div>
<div id="pg4">４ページ目の内容です。</div>
<div id="pg5">更新履歴（５ページ目の内容です。）<br>
最終<strong>更新</strong>日： 2015年7月8日<br>
・<a href="../huruaga/huru_ekg3.html" target="_new" title="降る上る">UP-DOWN 花吹雪</a><br>
・<a href="../huruaga/huru_ekg2.html" target="_new" title="降る上る">UP-DOWN 大量の泡が上る</a><br>
・<a href="../huruaga/huru_ekg1.html" target="_new" title="降る上る">UP-DOWN 激しい泡が上る</a><br>
・<a href="../bg/bg10.html" target="_new" title="動く背景">MOVE 水の３Ｄ移動-固定位置</a><br>
・<a href="../bg/bg9.html" target="_new" title="動く背景">MOVE 桜の３Ｄ移動</a><br>
・<a href="../bg/bg8.html" target="_new" title="動く背景">MOVE 泡の３Ｄ移動</a><br>
・<a href="../bg/bg7.html" target="_new" title="動く背景">MOVE 上端移動　右へ</a><br>
・<a href="../bg/bg5.html" target="_new" title="動く背景">MOVE 空の３Ｄ移動</a><br>
</div><!--★５ページ目の終了-->

</div><!--★見えないページ領域の終了------------------------------------------------------------------------------------->


<script type="text/javascript"><!--
//超簡単タブ切替もどき：2015/09/17
function a(b){ document.getElementById("copy").innerHTML=b.innerHTML;}
//--></script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

開閉幕１２ 超簡単タブ切替もどき 最終修正日 : 2015/09/17

　開閉幕１２　超簡単タブ切替もどき　　　　最終修正日 : 2015/09/17