< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< style>
. text {
display : inline- block;
cursor : pointer;
font- size: 28px;
padding : 40px 60px;
border : 1px solid red;
}
. text: focus {
color : aqua;
}
< / style>
< / head>
< body>
< div id= "box" >
< div class = "text" tabIndex= "1" > 1 < / div>
< div class = "text" tabIndex= "1" > 2 < / div>
< div class = "text" tabIndex= "1" > 3 < / div>
< div class = "text" tabIndex= "1" > 4 < / div>
< div class = "text" tabIndex= "1" > 5 < / div>
< div class = "text" tabIndex= "1" > 6 < / div>
< div class = "text" tabIndex= "1" > 7 < / div>
< / div>
< / body>
< / html>
Consejos: agregue teclas de método abreviado y orden de enfoque del teclado a los elementos agregando atributos de clave de acceso y índice de tabulación a los elementos.
