Result
jQuery
//キーボードの数字に合わせて動作$("body").keypress(function(event) { event.preventDefault(); $('div[class*="number-"]').hide(); $('div.number-'+String.fromCharCode(event.which)).show();});//クリックで数字に合わせて動作$("nav li a").click(function(event){ event.preventDefault(); $('div[class*="number-"]').hide(); $($(this).attr('href')).show();}); |
html
<nav> <ol> <li class="number-1"> <a href="#example-01" accesskey="1"><span class="number">1</span>Area 1</a> </li> <li class="number-2"> <a href="#example-02" accesskey="2"><span class="number">2</span>Area 2</a> </li> <li class="number-3"> <a href="#example-03" accesskey="3"><span class="number">3</span>Area 3</a> </li> </ol></nav><div class="content number-1" id="example-01">Area01</div><div class="content number-2" id="example-02">Area02</div><div class="content number-3" id="example-03">Area03</div> |
