クリックまたは数字キーを押したらそれに応じたコンテンツが表示される

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>

​

via

Simple keyboard navigable numbered menu.