HTML 学習:折りたたみリンク

2014-07-02 :  PCクリニック
本文の前に、
-・・・ -・-
現時点での、blogramのランクインカテゴリは、
4、2、2、1、 0、0、0、0、0(41)で、換算ポイント 72pt 。
「グルコサミン」昨夜ダウンしたが、今朝方返り咲いた。
・-・ - -・

さて、本文。

以前の「R 学習」や「Perl 学習
そして、現在の「Python 学習」
それらの結果ノートを、
HTML文書として作っている。

ここで、
「リンクをクリックすると、隠れていた内容が表示される」様にしたい。

一寸、検索して見つけた、

「タコの缶詰め」の
HOME > HTMLタグ > 折りたたみリンク
  リンクをクリックすると、隠れていたリンクが出るようにします。
  さらにそのリンクからリンクが出てくるように、階層を作ることもできます。
  大きな分類を表示して、
  クリックすると細かい分類のリンクが出てくるようにすると、
  レイアウトがすっきりして見やすくなると思います。
  隠しておける部分はリンクでなくてもいいし、
  タグも使えるので画像なども出てくるようにできます。
  ・・・・・

で学習。


結果、
自分用のひな型を
以下の様にした。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
</head>
<body style="font-size:1em">
<script language=javascript>
<!--
function show(inputData){
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "category_" + inputData );
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
}else{
objID.style.display='none';
objID.className='close';
}
}
//-->
</script>
<h1>見出し</h1>

ホゲホゲ  
<a href="javascript:void(0)" id="category_AAA" onclick="show('AAA');">クリックで展開</a>
<div id="layer_AAA" style="display: none;position:relative;margin-left:15pt" class="close">
<pre>
ホゲホゲのコード
</pre>
</div>
</body>
</html>


ここで、
“AAA”とある3ヶ所は同一文字。
で、ブロック毎に変える。


取り敢えず、1階層のみ。
多階層は又の機会。

本日はここまで。


見ていただいた序でとは厚かましい限りですが、
お帰りに投票して頂けるとなお嬉しいです。 ⇒ blogram投票ボタン


131118
関連記事
スポンサーサイト

コメントの投稿

管理者にだけ表示を許可する

おきてがみ/blogram
blogram投票ボタン



おきてがみ

最新記事
カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
月別アーカイブ
カテゴリ
最新コメント
検索フォーム
リンク
プロフィール

<紙>

Author:<紙>
ようこそ。
「パソコンヲタクの雑記帳」
もろもろなことを綴っています。
パソコン ヲタクってねくら?
画像は kami でなく kani です。

カウンター(fc2、i2i) /Google Analytics


i2i(from 2010-08-24)
Total =
Today  =  
Yesterday=
アンチエイジング

Google Analytics
ブックマーク