JavaScriptを使ったタブパネル
タブをクリックすると
書かれた内容が表示されます。
↓以下が実際のソースサンプルです。
▼script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("ul.tab li a").click(function(){
if($($(this).attr("href")).css("display") == "none") {
var a = $(this);
$($("ul.tab li a.selected").attr("href")).slideUp("normal",function(){
$(a.attr("href")).slideDown("normal");
$("ul.tab li a.selected").removeClass("selected");
a.addClass("selected");
});
}
return false;
});
});
</script>
▼CSS
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:800px;
margin:50px auto;
}
ul.tab{
padding:0;
}
ul.tab li{
list-style-type:none;
width:160px;
height:40px;
float:left;
}
ul.tab li a{
outline:none;
display:block;
color:blue;
line-height:40px;
text-align:center;
}
ul.tab li a.selected{
text-decoration:none;
color:#333;
cursor:default;
}
ul.panel{
clear:both;
border:1px solid #666;
border-top:none;
padding:0;
}
ul.panel li{
list-style-type:none;
padding:10px;
text-indent:1em;
color:#666;
}
</style>
▼XHTML
<body> <div id="container"> <ul class="tab"> <li><a href="#tab1" class="selected">太陽</a></li> <li><a href="#tab2">電磁波</a></li> <li><a href="#tab3">地球</a></li> <li><a href="#tab4">宇宙</a></li> <li><a href="#tab5">エネルギー</a></li> </ul> <ul class="panel"> <li id="tab1" class="selected"> 万生万物は 広大無辺な大慈悲なり 私たちの肉体は、空気や植物などのエネルギーを吸収することによって肉体保存が可能であり、地球自体の自転・公転によって、 地球上での安定した生活ができます。この事実だけをとってみても、私たちは感謝の心を持たなければなりません。太陽の熱エネルギーについていいますと、一秒間に放射される熱エネルギーは、9.3×10(22乗)/2.5×10(3乗)キロカロリーという莫大（ばくだい）なものです。これは石炭を一秒間に二百万トン燃焼させた熱エネルギーに匹敵します。私たちは、家庭や職場でガスや電気を使い、これに対して代価を払っています。その料金をガス会社や電気会社に払わなければ、会社は無慈悲にも燃料供給をやめてしまいます。</li> <li id="tab2"> 太陽のない世界を一度でも想像したことがあるでしょうか。 我々人間はもちろんのこと、地上の生物は生きてはいけません。 陽の当たらない地下の生物も、海底深く遊泳する魚類にしても、生きることは不可能です。 なぜかといいますと、地球の生物は、太陽の熱と地球の地熱によって生命を保持していますが、太陽がその光を消しますと、 地球もまた、その生命活動を停止します。 地球自体の熱源は、電磁波重力というものを媒体（ばいたい）にして、太陽熱を吸収保持することによって維持されているのです。</li> <li id="tab3"> 地球の内部は、火山をみても分かる通り、溶岩となって燃えています。 それはまさに小太陽のように燃えているのです。 小太陽は親太陽の影響を絶えずうけていることを知ってもらいたいと思います。 これについて人間の肉体の例が分かりやすいと思います。 心臓から出された新しい血液は、各血管を通って肺臓・肝臓、あるいは胃腸の働きを助けています。 しかし、心臓がその機能を止めたならばどうでしょうか。 各諸器管も、同様にしてその機能を止めてしまいます。 血液の万遍ない働きによって肉体の各諸器管は活発に活動し、生活することができるのです。</li> <li id="tab4"> 大宇宙体は意識の当体にして 意識の中心は心なり 即ち、太陽をふくめた宇宙全体は、ある偉大な意識そのものの中にあって動いている。 動かされている。そうして、その意識そのものは宇宙の心が中心をなしているのであります。 大宇宙というものは、ただ漫然（まんぜん）と偶然に出来上がったものではありません。 時間の例ではありませんが、百年に千分の一秒しか狂わないほどの正確さで動いています。 別な言葉でいえば、大宇宙の構成というものは、最初から計画されその計画にもとづいて動いているのです。計画から外れたものは何一つありません。そうして、その計画は意識の中心である心によって、必然の過程の下に動いているのです。このことを自律作用ともいいます。</li> <li id="tab5"> エネルギーというものには、すべて中心があり、核というものがあります。 物質は原子から成り立ち、原子は原子核というものから出来ています。 そうしてその核の中には、プロトンとニュートロンが存在し、核を構成しています。 陽子と中性子です。その核を中心に、いわゆる陰外電子が、一定の軌道を通って円運動を続けています。核と陰外電子の関係は、完全に調和されています。太陽のまわりを地球や火星が円運動を行っているのと同じです。自然は、常に調和されています。また調和されるように出来ています。 それは神仏の意思にもとづいて動いていますから、不調和を起こす余地がないのであります。</li> </ul> </div> </body>
