JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<header>
        <h2>Utilizando teclado em um menu com JQuery</h2>
        <p>Home(a) | Empresa(s) | Produtos(d) | Contato(f)</p>
    </header>

    <div id="home" class="container">
        <h2>Home</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>

    <div id="empresa" class="container">
        <h2>Empresa</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>

    <div id="produtos" class="container">
        <h2>Produtos</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>

    <div id="contato" class="container">
        <h2>Contato</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>

CSS

body {
    margin:0;
    padding:0;
}

header {
    text-align: center;
    margin: 0 auto;
}

.container {
    width: 400px;
    height: 300px;
    margin: 30px auto;
    padding: 10px 20px;
    border: 10px solid #666;
    color: #fff;
    font-size: .75em;
    line-height: 2em;
}

.container h2 {
    padding: 5px 10px;
    width: 200px;
}

#home{background-color: #15add1;}
#home h2 {background-color: #007aa5;}

#empresa{background-color: #fdc700;}
#empresa h2 {background-color: #bd9200;}

#produtos{background-color: #f80083;}
#produtos h2 {background-color: #af005e;}

#contato{background-color: #f18300;}
#contato h2 {background-color: #bb5f00;}
#contato h2 {background-color: #bb5f00;}

JavaScript

$(document).ready(function()
{
    $(".container").css("display","none");
    $("#home").css("display","block");

    $(document).keypress(function (e)
    {
       switch(e.which)
    {
           case 97: showViaKeypress("#home");
                    break;

            case 115: showViaKeypress("#empresa");
                            break; 

            case 100: showViaKeypress("#produtos");
                            break;

            case 102: showViaKeypress("#contato");
                            break;

       }
    });
});

function showViaKeypress(element_id)
{
    $(".container").css("display","none");
    $(element_id).slideDown("slow");
}