下記のデモではURLにアンカーリンク(ページ内リンク)「#Tab-001-001、#Tab-001-002、#Tab-001-003」を付与する事で、そのタブを開く事が出来ます。
(Tabがページの先頭で無い場合)ページの末尾に「Dummy_Tail(height: 100vh)」のような要素が無いと、ページの末尾に近い所にページ内ジャンプできないので注意して下さい。
改造する場合に注目する所は「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。
下記は実際のページです。
Tab-001-001
http://xd305417.html.xdomain.jp/demo/CSSTabLink003.htm#Tab-001-001
Tab-001-002
http://xd305417.html.xdomain.jp/demo/CSSTabLink003.htm#Tab-001-002
Tab-001-003
http://xd305417.html.xdomain.jp/demo/CSSTabLink003.htm#Tab-001-003
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
<title></title>
<style>
.Tab_Container {
display: flex;
flex-wrap: wrap;
}
.TabLink {
text-decoration: none;
font-weight: bold;
color: #fef;
background: #0bb;
margin: 0.1em 0.3em 0.1em 0em;
padding: 0.2em 1em;
order: -1;
}
.Tab_Container>a:target {
font-weight: bold;
color: #767;
background: #0f7;
}
.Tab_Container>.TabContent {
display: none;
}
.Tab_Container>a:target+.TabContent {
display: block;
}
.TabContent {
width: 100%;
}
.TabLink:hover {
font-weight: bold;
color: #767;
background: #0ee;
}
.Dummy_Tail {
height: 100vh;
}
</style>
</head>
<body>
<div class="Tab_Container">
<a id="Tab-001-001" class="TabLink" href="#Tab-001-001">Tab-001-001</a>
<div class="TabContent">
いろはにほへと ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
</div>
<a id="Tab-001-002" class="TabLink" href="#Tab-001-002">Tab-001-002</a>
<div class="TabContent">
ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
</div>
<a id="Tab-001-003" class="TabLink" href="#Tab-001-003">Tab-001-003</a>
<div class="TabContent">
つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
</div>
</div>
<br>
<footer>【Footer】</footer>
<div class="Dummy_Tail"></div>
</body>
</html>
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。
