JavaScriptを全く使用せず、CSSだけで作成したタブのページ切替です。
ページ部分とタブ部分を、全体のid="waku"で囲んでいます。id="waku"は全体領域の位置指定をするのに使用します。
ページ部分のid="page"には全ページ分の記述がされ、その見たいページは、タブ部分の「ページ内リンク」で呼び出します。
「ページ内リンク」は、当サイトの最初のHOMEページ等でも使用しています。
縦に長いページの場合、上部にメニューを書いてメニューをクリックすると、そのページの下の方に記述してある該当部分に一瞬で飛ぶリンクです。
詳しい説明は
TAG index から。
仕組みがわかると簡単なのですが、ただ一つ、
重大な欠点があります。
全ページを記述してあるid="page"の縦幅と横幅のサイズは１ページ分を表示するサイズしかありません。
はみ出した他のページ部分は非表示です。
それをタブをクリックすることで呼び出すと、「ページ内リンク」の性格上、呼び出されたページの先頭は、id="page"の一番上ではなく、表示画面の一番上にきます。
このタブ切替の全体領域の位置指定をどこに設定していても、タブ部分をクリックすると
リンク先を表示画面の一番上に表示するために、全体領域枠が跳び上がるという現象が生じるのです。
その対策は、
「跳び上がらないように、全体領域を画面の一番上に設置する」ということです。
原本は
Stronghold から。
そしてCSSで指定した「div#page >div」の「>」の説明は
W3Gのページ下の方を見て下さい。今回初めて使用しました。このおかげで class 指定をせずにすみました。