« photoshopがアートボード機能搭載!! | トップページ | 今日の収穫 »

2015.06.21

<div>表示をキー操作で切り替える。

大きい会社というものはリスクの方ばかり気になり、身動きが遅い。そんなことに苛立ったところで、時間の無駄だし、生産的じゃない。
adobe cc 2015はどうやら素晴らしい機能が満載なようだけど、セキュリティの強化されたネットワーク内の仮想HDDに保存すると問題が起こるようだ。。。う〜んいらいら。。

そんなこんなで、最近はなんでも自分で作ってしまう。

さて、今回は「<div>表示をキー操作で切り替える。」を作った。
左右キーで<div>の表示うぃ切り替える。
HTML、CSS、JSは以下

HTML

CSS

#wapper0 { display: block; } #wapper1 { display: none; } #wapper2 { display: none; } #wapper3 { display: none; }

JS

<script><!-- divの表示切り替え --> var num = 0; var maxDiv = 3; document.onkeydown = function (e){ if(e.keyCode == 39){ document.getElementById("wapper" + num).style.display = "none"; num++; if(num>maxDiv){ num = 0; } } else if(e.keyCode == 37){ document.getElementById("wapper" + num).style.display = "none"; num--; if(num<0){ num = maxDiv; } } document.getElementById("wapper" + num).style.display = "block"; }; </script>

|

« photoshopがアートボード機能搭載!! | トップページ | 今日の収穫 »

javascript」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/198455/61774877

この記事へのトラックバック一覧です: <div>表示をキー操作で切り替える。:

« photoshopがアートボード機能搭載!! | トップページ | 今日の収穫 »