サイトの中で、同じページ内であるにも関わらずリンクをクリックすると表示内容が変わる…なんてところを見かけたことがある方もいらっしゃるのではないでしょうか？
言葉だけだとイメージが伝わらないと思いますので、例として以下のようなものを用意しました(^^)
変更内容が『仮面ライダー電王』のセリフなのはなんとなくなのでお気になさらず…(笑)
このような形で、JavaScriptを使ってクリック1つでページのある部分の内容を変更させることができます！
そこで今回は上のような機能を設置できるよう解説したいと思います^^
見本コード
まず、見本コードを紹介したいと思います。今回は上で設置した機能を実装するためのコードを見本として紹介します。
<script language="javascript" type="text/javascript">
function Display(no){
if(no == "no1"){
document.getElementById("b1").style.display = "block";
document.getElementById("b2").style.display = "none";
}else if(no == "no2"){
document.getElementById("b1").style.display = "none";
document.getElementById("b2").style.display = "block";
}
}
</script>
<a href="javascript:;" onclick="Display('no1')" id="bt1">ボタン1</a>
<a href="javascript:;" onclick="Display('no2')" id="bt2">ボタン2</a>
<div id="b1"> /* 最初に表示しておく内容 */
俺、参上！(ボタン2を押すと変わります)
</div>
<div id="b2" style="display:none;"> /* ボタン2を押すことで表示される内容 */
僕に釣られてみる？(ボタン1を押すと変わります)
</div>
以上になります！
それでは簡単にJavaScript文について解説したいと思います。
1. if文にて条件を指定
上記の見本コードの5～8行目にある
if(no == "no1"){
document.getElementById("b1").style.display = "block";
document.getElementById("b2").style.display = "none";
これで
“もしnoが【no1】の時、b1を表示して、b2を非表示にする”
という条件を指定してあげてます。
続いて10～13行目にある
}else if(no == "no2"){
document.getElementById("b1").style.display = "none";
document.getElementById("b2").style.display = "block";
こちらで、
“もしnoが【no2】の時、b1は非表示にして、b2を表示する”
という条件を指定してます。
2. aタグにて実装
続いて見本コードの20～21行目の
<a href="javascript:;" onclick="Display('no1')" id="bt1">ボタン1</a>
<a href="javascript:;" onclick="Display('no2')" id="bt2">ボタン2</a>
このaタグにて機能を実装しています。
ボタン1のaタグをクリックすることで上のif文で指定した【no1】の条件が適応され、ボタン2のaタグをクリックすることで【no2】の条件が適用されるようにしています。
3. CSSで最初非表示にしたい内容を指定する
最後に、CSSにて最初に非表示にしたい内容をしていあげます。見本コードでいうと27～29行目の
<div id="b2" style="display:none;"> 僕に釣られてみる？(ボタン1を押すと変わります) </div>
このようにすることで最初にページを表示させた時にb1の内容が表示されるようになります！
以上がJavaScriptで内容を切り替える機能の内容になります。
これは知識として知っておいて損はないものだと思うので、是非とも覚えておきましょう！
