月別アーカイブ: 2012年4月

JavaScriptを使わずにCSS3のtarget疑似クラスだけでリンク表示件数を増やしていくような記述


OKWaveの質問で回答が締め切られた後に急に思いついた方法の備忘録。

http://okwave.jp/qa/q7422593.html

target疑似クラスなのでIEの旧バージョンではまず効かないけど、
スマホ用ということでそれなりに使えそう。
ソース的には妙な入れ子状態になっているのがいまいちだけどね。

サンプルデモ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">

li{
padding:8px;
border-bottom:1px solid #000;
}

#content03 ul,
#content03 p{
display:none;
}

#content01 ul,
#content01 p{
display:block;
}

#content02:target ul,
#content02:target p{
display:block;
}

#content02:target #content01 p{
display:none;
}

#content03:target ul,
#content03:target p{
display:block;
}

#content03:target #content02 p{
display:none;
}

</style>

</head>
<body>

<div id="content03">
<div id="content02">
<div id="content01">

<ul>
<li><a href="#">リンク01</a></li>
<li><a href="#">リンク02</a></li>
<li><a href="#">リンク03</a></li>
</ul>
<p><a href="#content02">次の3件</a></p>

</div>

<ul>
<li><a href="#">リンク04</a></li>
<li><a href="#">リンク05</a></li>
<li><a href="#">リンク06</a></li>
</ul>
<p><a href="#content03">次の3件</a></p>

</div>

<ul>
<li><a href="#">リンク07</a></li>
<li><a href="#">リンク08</a></li>
<li><a href="#">リンク09</a></li>
</ul>

</div>

</body>
</html>