その他■開閉幕１４超簡単CSSでタブ切替を改造しました…というか、ページ部分とタブ部分を囲んだ、
全体のid="waku"に、「position:fixed;」という固定位置指定を付けました。
「ページ内リンク」を使用したCSSのタブ切替は、タブ切替の全体領域の位置指定をどこに設定していても、タブ部分をクリックするとリンク先を表示画面の一番上に表示するために、全体領域枠が跳び上がるという説明をしました。
このジャンプ（跳び上がり）は、id="waku"に「position:fixed;」を付けることで無くなります。
その後はtopやleft等に数値をいれることで、お好きな場所に固定します。見本は上に固定しています。
スクロールしても同じ位置に表示されますので、上でも下でも右でも左でも、邪魔にならない位置に設定して下さい。
今回の見本では、少しJavaScriptを使用していますが、このJavaScriptは、タブのページ切替には無関係なので削除しても動作します。
このJavaScriptは、タブをクリックしたときに、タブの上側の枠線を消して、どのタグが選択されているかをわかりやすくする働きをします。
つまり装飾用です。
こんなのいらんわ！――と思ったら削除して下さい。
なぜならちょっとしたことなのに、設定は結構面倒だからです。
では、この装飾用のJavaScriptの説明です。
選択されたタブの上側の枠線は、クリックすると消えます。
これはクリックしたタブの上側の枠線の色を、CSSで指定している黒色から、タブの背景色である薄い灰色に変更させているからです。
その他■開閉幕１４超簡単CSSでタブ切替でのHTML部分のタブ部分の記述は、
<a href="#tab1">TAB1</a>でしたが、
今回は <a href="#tab1"
id="b1" onclick="c('b1')">TAB1</a> と長くなります。
この中に記述してある、２ヶ所の「b1」の数字は、タブの数ほど増えます。
さて、今回の見本は固定位置指定で上に固定されています。
もしこれを下に固定したら、タブ部分はページ領域の下部ではなく、クリックしやすいように上部に設定すると思います。
その場合は、タブの枠線が消えるのは、上側ではなく下側になります。
その時は、JavaScriptの中の 「borderTop」の記述を「borderBottom」に変更します。
JavaScriptの中に記述が２ヶ所あるので、必ず変更して下さい。
JavaScriptではCSSの「border-top」はハイフンを消してその次の文字を大文字にするルールがあるので、「borderTop」となります。
右側にタブを付けたり、左側にタブを付けたりする場合は、そのケースにより、
消す側の指定を変更します。
このJavaScriptの使用は難しくはないのですが、少々面倒。でも使用すると確実に見栄えはよくなります。
もっと簡単な方法もあります。
今、どのタブが選択されているかがわかるだけでいいのなら、枠線ではなく、背景色をJavaScriptで変更する方法です。
var Acss="#eee";/*★CSSで指定したタブ部分の「背景色」。見本は薄い灰色*/
var Bcss="#f00";/*★クリック時のタブの背景色。好みの色で。見本は赤色*/
として、「borderTop」の２ヶ所の記述を「backgroundColor」に変更します。
これだと、タブ部分の向きを考える必要はありません。タブをクリックすると赤色になり、次のタブをクリックするまで赤色のままです。
最後に
タブの増減の方法です。
削除の場合は、ページの数よりも余分なタブを削除すれば完了です。
増加の場合、ページ部分でid="tab6"と付けたdivを増やしたら、タブ部分に<a href="#tab6" id="b6" onclick="c('b6')">■■</a>を追加して呼び出します。
実はここで使用している「tab6」や「b6」の文字は、自分でわかりやすく変更しても可能です。
<div id="●">呼び出すページ</div>と
クリックするタブの<a href="#●" id="▲" onclick="c('▲')">■■</a>で１つのセットなので、
２つの●が同じで、２つの▲が同じなら、記述する文字は見本と違っても大丈夫です。
そして同じページで同じid="文字"は使用できないので、注意して下さい。
CSS使用のタブ切替の原本は
Stronghold から。タブクリック時に枠線を消す装飾用のJavaScriptの参考サイトは
Amenti から。