Entries
表示・非表示の切替
追記の表示・非表示などで応用可能なスクリプト。単純にdisplay:noneとdisplay:blockの切替だけで大した事はやっていない。自分用リサイクルメモ。
スクリプト
以下の内容を外部ファイルとして保存する。ファイル名は任意で構わない。サンプルではshowhide.jsとする。
function showhide(id) {
obj = (document.all) ? document.all(id) : ((document.getElementById) ? document.getElementById(id) : null);
if(obj) obj.style.display = (obj.style.display=="none") ? "block" : "none";
}スクリプト導入方法
<head>から</head>の間に以下の内容を挿入する。ファイルのパスは使用する環境に合わせて変更する。
<script type="text/javascript" src="/shared/showhide.js"></script>使用サンプル
HTMLに組み込む際、showhide('表示・非表示の切替対象のid名')を記述します。
<div id="navi">
<ul>
<li class="tab-1" onclick="showhide('tab1');return false" onkeypress="showhide('tab1');return false">●●●
<div id="tab1" style="display:none"><!-- 表示・非表示の切替対象ここから -->
<ul>
<li class="tab-1-1"><a href="xxx.html">■■■</a></li>
<li class="tab-1-2"><a href="xxx.html">■■■</a></li>
<li class="tab-1-3"><a href="xxx.html">■■■</a></li>
</ul>
</div><!-- 表示・非表示の切替対象ここまで -->
</li>
<li class="tab-2"><a href="xxx.html">●●●</a></li>
<li class="tab-3"><a href="xxx.html">●●●</a></li>
</ul>
</div>0件のコメント
コメントの投稿
0件のトラックバック
- トラックバックURL
- http://cfdn.blog1.fc2.com/tb.php/117-6988003a
- この記事に対してトラックバックを送信する（FC2ブログユーザー）
あのロリポップが運営する次世代レンタルサーバー「チカッパ！」
ブログ・CGI・PHP・MYSQLが使えて容量500MB〜1GBまで選択出来ます！
