Edit in JSFiddle

$("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();
});

div.content{
    max-width:325px;
    margin:0px auto; 
    display:none;
    clear:both;
    padding:20px;
}
div.content:target{display:block;}
span.number{font-size:24px;display:block;padding:20px;}
nav{max-width:325px;margin:0px auto;padding-top:25px;}
nav ol{
    padding:0px;
    margin:0px;
}
nav ol li{
    display:block;
    float:left;
    text-align:center;
    width:33%;
    border:1px solid #ddd;
}

nav ol li a{
    display:block;
    width:100%; 
    height:100px; 
    background:#fefefe;
    color:#666;
}
nav ol li a:hover{
    background:#fefecc;
}

<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>
        <li class="number-4">
            <a href="#example-04" accesskey="4"><span class="number">4</span>Area 4</a>
        </li>
        <li class="number-5">
            <a href="#example-05" accesskey="5"><span class="number">5</span>Area 5</a>
        </li>
        <li class="number-6">
            <a href="#example-06" accesskey="6"><span class="number">6</span>Area 6</a>
        </li>
        <li class="number-7">
            <a href="#example-07" accesskey="7"><span class="number">7</span>Area 7</a>
        </li>
        <li class="number-8">
            <a href="#example-08" accesskey="8"><span class="number">8</span>Area 8</a>
        </li>
        <li class="number-9">
            <a href="#example-09" accesskey="9"><span class="number">9</span>Area 9</a>
        </li>
    </ol>
</nav>

<div class="content number-1" id="example-01">Hello! I am Area01</div>
<div class="content number-2" id="example-02">This is the Area02</div>
<div class="content number-3" id="example-03">Are you good? Area03</div>
<div class="content number-4" id="example-04">Are you fine? Area04</div>
<div class="content number-5" id="example-05">Hi! I'm Area05</div>
<div class="content number-6" id="example-06">Nice to meet you? Area06</div>
<div class="content number-7" id="example-07">I'm Area07</div>
<div class="content number-8" id="example-08">Area08</div>
<div class="content number-9" id="example-09">Area09</div>