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>
