ITDS

前回に引き続きscp用につかったjavascriptの解説をします。

今回はページの内容を切り替える方法です。

では早速ソース

<script type="text/javascript">
var flg =0;
function btn(){
  if(flg==0){
       document.getElementById("pro1").style.display="none";
       document.getElementById("pro2").style.display="block"; 
       flg = 1 ;
  }else{
       document.getElementById("pro1").style.display="block";
       document.getElementById("pro2").style.display="none"; 
       flg = 0 ;
  }
}
</script>
<div id="pro1" style="display: block;">
内容①
</div>
<div id="pro2" style="display: none;">
内容②
</div>
<input type="button" value="ボタン" onclick="btn();">

divに囲まれた内容をstyle.displayを用いて表示の切り替えをしています。

displayがblockなら表示、noneなら非表示

これをボタンが押されたときに切り替えるように、javascriptで制御しています。

HTML、CSS、javascriptのお勉強